I have a form and add text style in the input, if user click the input, the text shrink and goes up. It's working good till google autocomplete remember username and password, the autocomplete is messing the style.
So far I tried using autocomplete="off", but doesn't work:
<input type="text" autocomplete="off" class="form-control" size="15" name="login" id="login" required/>
<input type="password" autocomplete="off" size="15" class="form-control" name="password" id="password" required/>
Also I tried using js, but doesn't work as well:
function connectForm() {
document.querySelector(".totalconnect_form").autocomplete = "off";
}
connectForm();
Is there a way to solve this? to remove the autocomplete?
Or if not possible, I can use js using condition, but I'm not sure how to target the autocomplete in js, any advice will be helpful, thanks.
Related
I can't set focus on html input, I tried this code, And it doesn't work.
document.getElementById('ember19').focus();
document.getElementById('ember19').click();
document.getElementById('ember19').select();
document.getElementById('ember19').value='Badman55555#hotmail.com';
document.getElementById('ember19').setAttribute('value','Badman55555#hotmail.com');
document.getElementById('ember22').focus();
document.getElementById('ember22').click();
document.getElementById('ember22').select();
document.getElementById('ember22').value='Bad123456';
document.getElementById('ember22').setAttribute('value','Bad123456');
Please before answer try your code on this page
https://id.sonyentertainmentnetwork.com/signin/
Try using autofocus
<input type="text" name="myInput" autofocus />
https://www.w3schools.com/tags/att_autofocus.asp
I am using following code where I need to match the passwords inside a form. It doesn't work on most of helps provided on here and other websites. I could have missed something that I am unable to trace. Please help me with this.
HTML
<form id="user_form" class='has-validation-callback'>
<input type="password" name="pass_confirmation" class="form-control" data-validation="length" data-validation-length="min6">
<input type="password" name="pass" id="pass" class="form-control" data-validation-confirm="confirmation" data-validation-help="Please give us some more information">
</form>
JavaScript
$.validate({
modules : 'security',
form : '#user_form',
onError : function() {
alert('Sorry! Please complete the form fields.');
}
});
Link to library
http://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.19/jquery.form-validator.js
Please refer password confirmation
This validator can be used to validate that the values of two inputs are the same. The first input should have a name suffixed with _confirmation and the second should have the same name but without the suffix.
<input type="password" name="pass_confirmation" class="form-control" data-validation="length" data-validation-length="min6">
<input type="password" name="pass" id="pass" class="form-control" data-validation="confirmation" data-validation-help="Please give us some more information">
for the second input change attribute data-validation-confirm="confirmation" to data-validation="confirmation" it will work.
Working fiddle
Try using a newer version of the library as it seems there may be a bug.
I was using the same version you had listed and received the same error. https://github.com/victorjonsson/jQuery-Form-Validator/issues/479
I want a textbox functionality like a gmail login page textbox. Right now I have code like this:
<script>
function inputFocus(i){
if(i.value===i.defaultValue){ i.value=""; i.style.color="#000"; }
}
function inputBlur(i){
if(i.value===""){ i.value=i.defaultValue; i.style.color="#888"; }
}
</script>
<body>
<input type="text" name="firstname" title="First Name" style="color:#888;"
value="First Name" onfocus="inputFocus(this)" onblur="inputBlur(this)" />
...
</body>
The problem with this code is when I select the tetbox, type "First Name" and if I reselect the textbox the text is clearing. And also gmail login page textbox functionality looks great, until I type a letter it shows the transperent text. But I don't know how to implement it.
For the "transparent text" you need to use the placeholder attribute:
<input type="text" name="firstname" ... placeholder="Email">
are you looking for a placeholder ??
If so... you can do like this..
<input type="text" name="somename" id="someid" value="" placeholder="Email">
Placeholder is used to display the text in the text box and will disappear as soon as you start typing..
If you want to delete the "transparent text" once start typing, you can use placeholder attribute of input element
This attribute is introduced in HTML5 to handle this scenario without writing any peice of javascript code
Your html code should look like this
<input type="text" name="firstname" placeholder="First Name"/>
This will also work as desired when you delete your text, as it will reset the transparent text back again.
Also, here is a working example on jsfiddle
I also, encourage you to review new elements and attributes introduced in HTML5, it will save a your time writing a lot of javascript to handle already built in functionalities
I am using the below input field. Here the onkeypress is working fine for tab key and enter key but when I am trying to just create a alert form onblur it is not working at all. I moved the cursor pinting to another input field by mouse click but onblur is not firing at all.
<input autocomplete="off" type="text" name="username" id="username" maxlength="10" onkeypress="isDouble(document.getElementById('username'),event)" onblur="alert(1)" required/>
Not sure if I am missing anything. Thanks in advance.
These all work, so not sure where the discrepancy is with the rest of your code and the input you provided.
<input onfocus="console.log('focus')" onkeyup="console.log('keyup')" onblur="console.log('blurred')" type="text">
<input autocomplete="off" type="text" name="username" id="username" maxlength="10" onkeypress="isDouble(document.getElementById('username'),event)" onblur="alert(1)" required/>
This works:
(both onblur and isDouble fire):
function isDouble(arg) {
alert('isDouble');
return false; // remove this, and only isDouble() will fire.
}
Check this out
http://jsfiddle.net/78N9A/1/ it seems to working
<input autocomplete="off" type="text" name="username" id="username" maxlength="10" onkeypress="isDouble(document.getElementById('username'),event)" onblur="alert(1)" required/>
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/