I have the following codes, its part of the application I am building for iPhone/android phones.
<li><span>X</span><input type="text" pattern="[0-9]*" id="anum" maxlength="9" placeholder="Account Number""/></li>
<li><span>X</span><input type="text" id="bname" placeholder="Beneficiary Name" /></li>
the "X" between the spans is suppose to appear when on a keyboard a button is pressed. after the "x" has appeared the user can remove the entire text in that field by pressing on the "x". when there is no element in the field at all, the "x" is not visible. But i cant make it happen.
I am using webapp-net. I would be glad if some could help me with this.
I'm not either quite familiar with WebApp.Net, but you might consider on using a form and a reset button, such as:
<input type="button" value="X" onClick="this.form.reset()" />
or something like:
<input type="reset" value="X">
inside of a <form> with the rest text inputs, and having in mind an html-like enviroment (even thought this might not clear a radio/checkbox inputs).
If I haven't got you wrong, you might also consider on looking if there is something like placeholders for textareas and/or text inputs on that framework. Good luck.
Related
How do I prevent a form from suggesting auto-complete values, from previous entries or from saved information in Edge?
In the above image, the email input field is marked as autocomplete="false", but still in the right pane you can see the suggestion is populating.
When I add autocomplete=disabled to one field it seems it work, but when I add the attribute to all the inputs, it again starts displaying suggestions for every field.
What is the solution for this?
Add the aria-autocomplete="list" attribute to the input.
<input type="text" id="FirstName" name="attr1" aria-autocomplete="list">
Do not use any other value for the attribute.
According to your description, I reproduced the problem. I think your issue is caused by the "Save and fill personal info" setting being enabled in Edge.
If you navigate to edge://settings/personalinfo and disable this feature, you can see this behavior no longer exists.
Or you can also click the "Manage personal info" option in the picture you provided, and then disable it.
I did some simple tests and found that if you need to solve the problem from the code, you need to modify the name attribute of the form's related field.
Like this（do not use attribute values like name or email... and maybe there are others I am not aware of):
<label for="attr1">attr1:</label>
<input type="text" id="FirstName" name="attr1">
<label for="attr2">attr2 :</label>
<input type="text" id="LastName" name="attr2">
<label for="attr3">attr3 :</label>
<input type="email" id="Email" name="attr3" autocomplete="off">
<input type="submit">
I don't recommend this, because good naming helps you understand and maintain the code. Using proper attributes like name and email also helps your code be more accessible for screen readers or other assistive technology.
Autocomplete has been causing me trouble for quite some time. It overlays buttons and search results which causes users to click it instead of a link on the webpage.
I have been searching the internet for solutions to this for literally years. None of them are both practical and work consistently. I have tried all the alternatives to "off" listed throughout the relevant Google searches.
Below I have uploaded a GIF. The GIF shows me triggering autocomplete on an input which has autocomplete set to off.
I then remove the name attribute of a separate input within the form and suddenly autocomplete switches off.
I also demonstrate that having the keyword "Company" in the placeholder seems to override autocomplete=off. However, this does not seem to override autocomplete=off in all situations.
In the below example I used a datepicker, but I can also reproduced the problem with simple text inputs.
Is there a reason behind this strange behavior?
One solution is to use type="search", however, this may not be the desired approach for all developers.
Thanks in advance.
Have you tried this ?
<input name="unm" id="unm" type="text" autocomplete="false" readonly onfocus="this.removeAttribute('readonly');" />
Try using a form method.
<form method="post" action="">
<div>
<label for="cc">Please work:</label>
<input type="text" id="cc" name="cc" placeholder="Enter a company here" autocomplete="off">
</div>
This question might appear as duplicate of:
XPATH required for an input text field? but question is why my custom xpath is not working. Though it is working for buttons, plain text on page, links etc.
Here is the HTML of it:
<input id="uemail" class="input_text" type="email" value="" tabindex="1" size="30" name="user[email]" autofocus="autofocus" autocorrect="off" autocapitalize="off"/>
For this HTML I tried to find it in firebug, I wrote:
//*[text()[contains(.,'user_email')]]
//id[text()[contains(.,'user_email')]]
//*[id()[contains(.,'user_email')]]
but none of worked, what am I missing.
Reasons:
1. Because, You are looking for text using text() but there is no text(as per given HTML), like you might have in links, buttons, plain text on page etc,so remove it.
2. after 'contains' you are looking for all elements just look for its type i.e. id
3. third you know that it's an input field so use * or input. * means any and input means that this is an input box.
So, finally it becomes://input[contains(#id,'user_email')]. Which I am sure will work.
I have a design question. I have a few input boxes in my form with some default values (numbers). I was wondering if I should have a mechanism to blank them out when user clicks on the box to change them. It would look cool. But if I leave them as it is, it might just be more useful for the user in case he wants to alter only a few digits or copy the figure..
I apologize if this is not the right forum for this type of questions.
You can specify a placeholder-attribute for input like this:
<input type="text" value="" placeholder="Some text" />
JSFiddle is here
The text "Some text" will disappear if the user takes some input.
This snipplet doesn't require any javascript and is really nice i think. Have Fun!
Personally, I wouldn't. Beware of "creeping featurism" :)
Just have the above saying e.g. "your phone number", people should manage.
Here's the simplest possible way of removing the digits on "click":
HTML
<input name="" type="text" value="2">
JS:
jQuery(document).ready(function($) {
$('input').click(function(){
$(this).val('');
});
});
Fiddle:
http://jsfiddle.net/k47L4/
Short version:
How can I have my form's button label text differ from the value submitted to the server without using the <button> tag?
Long version:
I wanted to have the text that appeared in a button in a form to be different than the value submitted in the query string. So, I looked around, and came across this approach...
<button name="method" type="submit" value="repackage">Update Config</button>
...and that worked on IE9 on one of my laptops and I was happy. The user saw "Update Config" and the server received method=repackage in the query string.
Then I brought this app to work and ran it on a workstation, also with IE9. But something had gone wrong. The user still saw "Update Config", but the server now received method=Update%20Config in the query string.
So I investigated some more. I found that www.w3schools.com recommmended not using a <button> tag in a form. They say: "If you use the <button> element in an HTML form, different browsers may submit different values. Use <input> to create buttons in an HTML form" in this article. This seems to be what I am experiencing.
So I looked some more, and found lots of conflicting information about the right way to do this. For example here is a Stack Overflow post that asks exactly this question, but the accepted answer is to use the <button> tag. I can say from experience and research that this is not a reliable approach.
For newcomers: With some CSS this works like a charm as of September 2017:
<form>
<label style="padding:5px; cursor:pointer; border:solid 1px; border-color:#ccc">
<input style="display:none" type="submit" name="method" value="repackage">
<span>Update Config</span>
</label>
</form>
If there's no other way try this:
Use an image button, instead of button. An image button will work as ordinary submit button, but you create an image of the desired button text (no one can change your text then).
<input type="image" src="http://images.webestools.com/buttons.php?frm=2&btn_type=31&txt=Update+Config" name="method" value="repackage">
This works as well. Manipulate the appearance using the bootstrap button classes.
<label class="btn btn-primary">
<input class="d-none" type="submit" name="method" value="repackage">
Update Config
</label>