Currently there is a bug in Firefox that doesn't let you to copy stuff from disabled textarea (in chrome it works fine) and I've been thinking how can I replace my code so that it works ok in firefox as well. i'm using GSP files but can use normal html tags within them as well.
Here is my code snippet:
<g:textArea rows="5" cols="1" name="description" value="${forecast?.description}" class="description-t-area" disabled="${!canEdit}"/>
And here is image how it looks on the web:
You could use pre tag e.g.
<pre id="description" contenteditable="${!canEdit}">${forecast?.description}</pre>
The issue is that you can not set disabled to true or false, the existence of the attribute means true, eg:
disabled="false" == true
disabled="true" == true
disabled == true
You have two options, use a plain text-area and conditionally print disabled or nothing html tag or set disabled via javascript.
More info here Correct value for disabled attribute
Edit: Just tried this is Grails 3.2.8 and it does actually work correctly now (been a while since I've looked, sorry!)
<g:textArea name="foo" disabled="${false}"/>
results in
<textarea name="foo" id="foo" ></textarea>
and
<g:textArea name="foo" disabled="${true}"/>
results in
<textarea name="foo" id="foo" disabled="true" ></textarea>
Related
I have to modify a code using Struts. More precisely, I have to modify the style of some HTML inputs that are coded as <html:text> Struts tags.
So for example, I have:
<html:text name="myName" property="myProperty"
maxlength="24" size="25"
onchange="JavaScript:fooBar();" />
The inputs are actually displayed with disabled content and I would like to modify this. (The web browser I'm working on is IE 11).
EDIT:
The Struts tag actually generate this HTML :
<INPUT onchange=JavaScript:myFoo();myBar(this);
disabled="disabled"
maxLength=24
size=25
value=myValue
name=myProperty>
So it is clear that the disabled attribute is the origin of the problem but I don't know what might be the cause why Struts generates it in this case.
EDIT:
It appears that the display is different from a version of Internet Explorer to the other, for example when using IE 10, the inputs are not disabled and the disabled attribute value is an empty string (i.e. disabled="" in the HTML tag).
I have built a textbox dropdown AngularJS component which works great in Chrome, Firefox, Safari and Internet Explorer.
A feature of this component is that you type in a string, and then can use the up/down arrow keys to scroll through suggestions.
In Microsoft Edge, as soon as you hit the down arrow, the following text is added to the input box:
briefly explain your changes (corrected spelling, fixed grammar, improved formatting)
Is there anything I can do client side to stop this from happening?
<form>
<input type="text" />
</form>
To demonstrate this, run the above snipper, type something into the textbox and hit the down arrow twice on Edge. I want this to not happen, as it is breaking my autocomplete!
Thanks
If I understand correctly, you are having an issue with the autocomplete feature. Simple add "autocomplete='off'" to your input and that should disable the feature.
<input type="text" autocomplete="off"/>
Unfortunately, none of the above suggestions worked for me in latest Edge. However, this solution does:
<input type="text" autocomplete="off" list="autocompleteOff"
id="fieldId" name="fieldname" placeholder="Placeholder here" />
This forces Edge to find a data lookup list called autocompleteOff which doesn't exist. Works a treat for me.
Added advantage is that it's pure HTML, no CSS or JS required.
2021 update:
Another solution which works very well for me is to add the readonly attribute to the field and then remove the tag using JQuery after a short delay of a few ms. The readonly attributes causes Edge (and others) to ignore the field.
For anyone experiencing autofill ignoring the autocomplete="off" on Edge 105+, you can use aria-autocomplete="none" alongside, which will prevent autofill from showing up (Tested in macOS 12.5 but should work in other platforms)
From Mozilla:
You can set the autocomplete on the actual form tag <form autocomplete='off' ... >...</form> which will work for the entire form, or on individual <input type='text' /> tags.
In my experience on IE 11 and Edge putting it on the form works but individual tags does not work. I tried testing on Chrome but the fields were already not autocompleting.
Please read the full Article for more detailed information.
NOTE
Most browsers disregard this for login fields.
if you want to remove autocomplete at the input in chrome when you use autocomplete="off" also you must remove id, if you don't remove id on your input, autocomplete will not work!
simple example:
<input type="text" autocomplete="off" list="autocompleteOff"
name="fieldname" placeholder="Placeholder here" />
you can handle your input with name ;) , that work for me fine.
<input type="text" autocomplete="new-password" />
If you are defining a user management page where a user can specify a new password for another person, and therefore you want to prevent autofilling of password fields, you can use autocomplete="new-password"
MDN reference
It works also for non-password fields.
if you need it app/site-wide you can use jquery:
$('input').attr('autocomplete','off');
Or if you're like me and using Angular+ui-router you might try the following:
In your index.html add the following script:
<script type="text/javascript">
setTimeout(function() {
$('input').attr('autocomplete', 'off');
}, 2000);
</script>
Then to cover state changes, add the following to your root controller:
$rootScope.$on('$stateChangeStart', function() {
$timeout(function () {
$('input').attr('autocomplete', 'off');
}, 2000);
});
The timeouts are for the html to render before applying the jquery.
If you find a better solution please let me know.
This worked for Edge & Chrome (not a login form tho, not sure if that makes a difference)
autocomplete="somerandomstring"
https://gist.github.com/niksumeiko/360164708c3b326bd1c8#gistcomment-2367048
Just autocomplete="off" list="autocompleteOff" in your input and work done !
autocomplete="off" doesn't work since yesterday (edge 105.0.1343.25).
Looks like a bug to me. Hopefully, they will fix it soon.
in edge worked for me
`autocomplete="false" readonly onfocus="this.removeAttribute('readonly');" /
`according to this https://stackoverflow.com/a/30344707/14913109
CodePen: http://codepen.io/leongaban/pen/hbHsk
I've found multiple answers to this question on stack here and here
However they all suggest the same fix, using type="number" or type="tel"
None of these are working in my codepen or project :(
Do you see what I'm missing?
Firstly, what browsers are you using? Not all browsers support the HTML5 input types, so if you need to support users who might use old browsers then you can't rely on the HTML5 input types working for all users.
Secondly the HTML5 input validation types aren't intended to do anything to stop you entering invalid values; they merely do validation on the input once it's entered. You as the developer are supposed to handle this by using CSS or JS to determine whether the field input is invalid, and flag it to the user as appropriate.
If you actually want to prevent non-digit characters from ever getting into the field, then the answer is yes, you need to use Javascript (best option is to trap it in a keyUp event).
You should also be careful to ensure that any validation you do on the client is also replicated on the server, as any client-side validation (whether via the HTML5 input fields or via your own custom javascript) can be bypassed by a malicious user.
It doesn't stop you from typing, but it does invalidate the input. You can see that if you add the following style:
input:invalid {
border:1px solid red;
}
I use a dirty bit of JS inline, it's triggered upon paste/keying (input).
Within your input tag add the following:
oninput="this.value=this.value.replace(/(?![0-9])./gmi,'')"
All it's doing is replacing any character not 0-9 with nothing.
I've written a tiny demo which you can try below:
Numbers only: <input oninput="this.value=this.value.replace(/(?![0-9])./gmi,'')"></input>
Firstly, in your Codepen, your inputs are not fully formatted correctly in a form.... Try adding the <form></form> tags like this:
<form>
<lable>input 1 </lable>
<input type='tel' pattern='[0-9]{10}' class='added_mobilephone' name='mobilephone' value='' autocomplete='off' maxlength='20' />
<br/>
<lable>input 2 </lable>
<input type="number" pattern='[0-9]{10}'/>
<br/>
<lable>input 3 </lable>
<input type= "text" name="name" pattern="[0-9]" title="Title"/>
</form>
Just add a check to the onkeypress event to make sure that the no alphanumeric characters can be added
<input
type="text"
placeholder="Age"
autocomplete="off"
onkeypress="return event.charCode >= 48 && event.charCode <= 57"
maxlength="10"
/>
I want to use HTML5 form validations like 'required', in struts2 UI tag . I also have checked struts2 core jar file which shows that dynamic attribute is true for s:textbox. but if i use like <S:textbox name="username" required>, it is throwing error.
Please help
Try like this:
<s:textbox name="username" required="required" />
Works perfectly in my case.
You can also use other html5 attributes in a similar way.
eg. placeholder="placeholder value" , etc.
The attributes must have a value. So required will not work but required="" will not cause an issue.
This is the only way I have made it work in IE FF and Chrome
<input type="text" name="u.lName" required value='<s:property value="u.lName"'/>'/>
Demo link:
http://elevation-inc.com/dev/test/ieform/
In IE 6/7/8 - if you enter a term into a simple input field, submit the form and then hit the back button - the input field retains the previously submitted term. If you then refresh the page, the value is also retained.
How, via HTML, can this pre-population be disabled? We want no value to be in the input box on page load/domready.
We've already tried autocomplete='off' on both the form and input element, but the pre-population is still persisting.
Thanks in advance.
<input type="text" name="userid" autocomplete="off" /> works fine for me (the same goes with your form). Make sure you reload the page in between testing (CTRL + F5 for full refresh).
This is how IE works, but you can change the value with JavaScript
<body onload="document.getElementById('q').value = '';">
<form action="http://www.google.com/search" name="f" autocomplete="off">
<input type="text" name="q" autocomplete="off" id="q"><input type="submit">
</form>
Well I guess it's a browser behaviour you can't bypass by html. You can do it in javascript however:
<script>
window.onload = function() { document.forms.f.q.value = ""; };
</script>
or if you don't want to wait for images to load (because window.onload will wait for that),
you can use the document ready event, as described here. (it needs more tweaking to make it work across all browsers)