This answer explains how to turn off autocomplete for an entire HTML document with jQuery.
Without jQuery is there a way to turn "off" React's equivalent autoComplete for all inputs within the app?
I'm not very familiar with jQuery otherwise I'd try to convert the function myself.
To disable the autocomplete for input fields in React, we need to set the input field’s autoComplete attribute to "new-password".
<input type="email" name="email_signup" placeholder="Email" autoComplete="new-password" />
<input type="password" name="password_signup" placeholder="Password" autoComplete="new-password" />
This will turn off autocomplete for input.
You can use autocomplete="off" on the parent level of the form and that will turn it off for the entire form
<form method="post" action="/form" autocomplete="off">
[…]
</form>
use this in elements:
autoComplete:'off'
You can do it with
<input name="myinput" placeholder="enter your name" value={this.input.myinput} autocomplete="off" />
The post that you are linking is just assigning the autocomplete off attribute to the document when it is loading. You can accomplish what jQuery is doing with something like the following using vanilla JS. However, I would suggest a more "React" way of doing things based on whatever logic you wish to accomplish.
var foo = document.querySelector("input");
foo.setAttribute("autoComplete", "off");
Related
I´m trying to implement a greaskemonkey script to make an auto-input, but I cannot find a way to do it.
What I have:
HTML form:
<form ng-submit="buy(quantity2)">
<input name="quantity" type="text" ng-model="my.quantity" style="width:30px" maxlength="2">
</form>
I simply don´t know how to input a value for the box, usually I would do
$("input[name='quantity']:first").val("1");
Unfortunately val doesn´t exists here. Need a help, thanks!
For your better understand i just give you a example how you can take your value.
HTML form:
<form ng-submit="buy(youravlue)">
<input name="quantity" id="quantity" type="text" ng-model="youravlue" style="width:30px" maxlength="2">
</form>
using ng-submit you can take your value this way.
$scope.buy=function(data){
console.log(data);
}
using ID you can take your value this way.
angular.element("#quantity").val();
In angularjs we have to find the element either by id or querySelector or querySelectorAll and wrap it over angular.element which will provide jqlite(lighter version of jquery)
Refer this https://docs.angularjs.org/api/ng/function/angular.element
angular.element(document.querySelector("input[name='quantity']")).val("1");
Say I have the following form:
<form>
<input type="text" required ng-model='myValue' ng-maxlength='5'></input>
{{myValue}}
{{myValue.length}}
</form>
When the length of the text in the input exceeds the maxlength, the model becomes empty. Is there any way to prevent this behaviour while applying this validation, without rolling a custom form level validator?
at first, input element no end mark(</input), the correct like this:<input name="test" type="text"/>
you can handle form.test.$error.maxlength to deal something, example code:
<form name="form">
<input name="name" type="text" required ng-model='myValue' ng-maxlength='5'/>
<div>value:{{myValue}}</div>
<div>length:{{myValue.length}}</div>
<div>validate:{{form.name.$error.maxlength}}</div>
</form>
According your means, the invalid value lead to null model, I think this is no problem.
I would like to clear all the input in my website even if the parameters for logging have been saved by the navigator.
I've tried to do that using that on the concerned input
<input type="text" name="login" placeholder="Adresse E-mail" onload="this.value=''">
Is there an other way for doing that?
What you might want to try use is the autocomplete=off parameter in your input fields.
<input type="text" name="login" placeholder="Adresse E-mail" autocomplete="off" >
This parameter can also be added to the actual <form> element -
<form name="myForm" id="myForm" method="post" autocomplete="off" >
To handle it in generic way, instead of tagging every field, use readystate change event of document and get all input elements by tag name using getElementsByTagName. Check the type of each element and then set the appropriate value.
I have a signup form with 3 fields:
Username
Email
Password
On most browsers when a user clicks on a particular field, the placeholder value displayed is blanked out so the user can type and if they type nothing and come out of the field the placeholder text re-appears. Anyway some browsers e.g. chrome don't hide the placeholder text onfocus so I had to write some javascript to take care of this.
I'm quite new to javascript but to me the code I've written to deal with this doesn't seem right. I have a feeling it could be shorter and better.
For each field I have this inside a document ready function:
$("#field_id").focusin(function() {
$(this)[0].placeholder = "";
});
$("#field_id").focusout(function() {
$(this)[0].placeholder = "Enter email";
});
My html:
<p><input class="signupFields" data-validate="true" id="user_username" name="user[username]" placeholder="Username" size="30" type="text" /></p>
<p><input class="signupFields" data-validate="true" id="user_email" name="user[email]" placeholder="Email" size="30" type="text" /> </p>
<p><input class="signupFields" data-validate="true" id="user_password" name="user[password]" placeholder="Password" size="30" type="password" /> </p>
So imagine that times 3 .. Seems like a lot of code for such a simple requirement. Also I really don't like the fact that I'm trying to mimic javascripts document.getElementById. There must be a way I can do this in a more jQuery like way. Not liking the [0].
Can any body give me an example of a cleaner way of doing this exact same thing?
Kind regards
I'd suggest that you don't need to worry about this, but to remove the placeholder text on focus (and to restore the placeholder on blur) I'd advise the following:
$('input').focus(
function(){
$(this).data('placeholder',this.placeholder).removeAttr('placeholder');
}).blur(
function(){
$(this).attr('placeholder',$(this).data('placeholder')).data('placeholder','');
});
JS Fiddle demo.
The only reason to use the $(this)[0] notation is to 'break out' from the jQuery-fied $(this) object back to the native DOM node. To avoid doing that, it's easier to just this:
$('input').focus(
function(){
this.dataPlaceholder = this.placeholder;
this.removeAttribute('placeholder');
}).blur(
function(){
this.placeholder = this.dataPlaceholder;
this.removeAttribute('dataPlaceholder');
});
JS Fiddle demo.
References:
blur() (jQuery).
focus() (jQuery).
data() (jQuery).
focus() (jQuery).
removeAttr() (jQuery).
removeAttribute().
assuming your html is like:
<input id="username" type="text" placeholder="username"/>
<input id="email" type="text" placeholder="email"/>
<input id="password" type="text" placeholder="password"/>
your JS could be:
$("input").focusin(function() {
$(this).data('placeholder',this.placeholder);//store the current placeholder
this.placeholder = "";//no need for $(this)[0]
}).focusout(function() {
this.placeholder = $(this).data('placeholder');//retrieve the stored placeholder
});
this would target all of them with only one bit of code.
Here's a demo: http://jsfiddle.net/JKirchartz/SGZNQ/
<form id="commentform" method="post" action="wp-comments-post.php">
<input type="text" aria-required="true" tabindex="1" size="22" value=""
id="author" name="author">
</form>
I set default value "visitor" to the input box. When focus is in text box or mouose enters it, I want to hide "visitor" string and want to show it when it loses focus or mose moves out.
Try using the HTML5 placeholder attribute:
<input type="text" aria-required="true" tabindex="1" size="22"
placeholder="visitor" id="author" name="author">
While browser support is not 100% there yet, this will give you a standard way to achieve what you're trying to achieve, without going through unnecessary hoops.
Another thing you can try is to overlay the input element over some text and make it transparent/translucent when not in focus and opaque when in focus/filled.
As of today, Tumblr's login page uses this trick:
<div class="input_wrapper" id="">
<label for="user_password">Password</label>
<input type="password" id="user_password" name="user[password]" data-validation-type="password" value="">
</div>
Through CSS magic this becomes:
Looks like you are using WordPress, so you have the jQuery library on your site.
You can use my jQuery plugin to achieve this.
Example
jQuery
$('#author').inputLabel({
customLabel: 'Visitor'
});
In this case, I had to specify the label myself, but the plugin works without this by finding the relevant label element to the input, which should be present for accessibility.
jsFiddle.
If you are up to HTML 5 yet then try this:
<script type="text/javascript">
var prompt="visitor";
var txt=document.getElementById("author");
txt.onfocus=function(){txt.value='';}
txt.onblur=function(){
if(txt.value==''){
txt.value=prompt;
}
}
</script>
Ates Goral's answer looks very interesting. please try it first shot. this is an alternative if you do not want to sweat..:)
i would suggest using a watermark plugin. there are many available.
have used this plugin before. worked fine. gives you nice control.
the plugin requires jQuery
Though I too would use jQuery or CSS and a pseudo-class (:focus)....
Here's an easy JS solution that does exactly what you're after. Again, I wouldn't recommend this approach for more than one or two input fields.
<input type="text" value="Visitor" onFocus="this.value='';" onBlur="this.value='Visitor';" id="author"/>