default value 'password' for input field, show it? - javascript

I'm using this js to display default password, when user clicks it automatically clears default value, if user deselects without entering anything default value re-appears.
I used it for all my fields, but obviously for password it is trickier! :)
How would you do it?
<input
type="password"
onblur="this.value=!this.value?'Password':this.value;"
onfocus="this.select()"
onclick="if (this.value=='Password'){this.value='';}"
name="pwd"
id="user_pass"
class="input"
value="Password"
size="20"
tabindex="20" />

Were you thinking of <input placeholder='Password' type='password'/> ?

This is your solution: http://jsfiddle.net/cgP5K/1/
<input
type="text"
onblur="this.value=!this.value?'Password':this.value;"
onfocus="this.select()"
onclick="if (this.value=='Password'){this.value=''; this.type='password'}"
name="pwd"
id="user_pass"
class="input"
value="Password"
size="20"
tabindex="20" />​

Try This out - http://roshanbh.com.np/examples/text-in-password/

You need to create a plain text input as a placeholder. This code will do that for you without exposing any variables to the global scope:
​<input id="pass-placeholder" type="text"​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ value="Password" />
<script type="text/javascript">
(function(){
var pass_holder_el = document.getElementById('pass-placeholder');
var pass_el = document.createElement('input');
pass_el.type = 'password';
pass_el.onblur = function(){
if(!this.value)
this.parentNode.replaceChild(pass_holder_el, this);
}
pass_holder_el.onfocus = function(){
this.parentNode.replaceChild(pass_el, this);
pass_el.focus();
}
})();
</script>​
JSFiddle

Please use the below solution,
<input name="password" class="input"value="Password" size="20"
tabindex="20" onclick="if(this.value==defaultValue){this.value=''; this.type='password'} else if(this.value==''){this.value=defaultValue; this.type='text'} " onblur="if(this.value==''){this.value=defaultValue; this.type='text'}"/>
because first solution works well but if u empty the password field, it will not convert to its default value which is a text. So try above solution.

Related

Disable an input element when a dependent element has changed value

<input type="password" placeholder="oldPass" id="passwordcyu" class="input-xlarge" name="passwordcyu">
<input type="password" placeholder="newPass" disabled=true class="input-xlarge" name="passwordmoi" id="passwordmoi">
<input type="password" placeholder="confirmPass" disabled=true class="input-xlarge" name="cfpw" id="cfpw" style="display:inline">
Hi everyone, I'm a new guy in javascript/jquery, I have three inputs text like above. I don't know how to disable inputs #newPass and #confirmPass when #oldPass has changed value. Please help me or give me some advises.
P/s: This is the first time I raise a question on stackoverflow. Sorry if I make someone feels uncomfortable about my question.
I'm going to assume that since your elements are already disabled in your HTML, you'll likely want to enable them. (This also fits the implied use case.)
The simplest jQuery-based answer for you would be to bind your element to a change() handler and disable the inputs as you see fit:
$("#passwordcyu").change(function() {
$("#passwordmoi, #cfpw").removeAttr("disabled");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="password" placeholder="oldPass" id="passwordcyu" class="input-xlarge" name="passwordcyu">
<input type="password" placeholder="newPass" disabled=true class="input-xlarge" name="passwordmoi" id="passwordmoi">
<input type="password" placeholder="confirmPass" disabled=true class="input-xlarge" name="cfpw" id="cfpw" style="display:inline">
Pure javascript live example:
function changeInputs() {
document.getElementById("passwordcyu").disabled = true;
document.getElementById("passwordmoi").disabled = false;
document.getElementById("cfpw").disabled = false;
}
<input type="password" placeholder="oldPass" id="passwordcyu" onchange="changeInputs()">
<input type="password" placeholder="newPass" disabled="true" id="passwordmoi">
<input type="password" placeholder="confirmPass" disabled="true" id="cfpw">
You can use prop and disabled the other input whenever old password is clicked . i.e :
//when oldpass is click
$("#passwordcyu").on("click",function(){
$("#cfpw , #passwordmoi").prop("disabled", true);
});
//when new password is click enbaled it
$('#passwordmoi ').closest("div").click(function () {
$(this).find("#cfpw,#passwordmoi").attr("disabled", false);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="password" placeholder="oldPass" id="passwordcyu" class="input-xlarge" name="passwordcyu"><br/><br/>
<div>
<input type="password" placeholder="newPass" class="input-xlarge" name="passwordmoi" id="passwordmoi"> <br/><br/>
<input type="password" placeholder="confirmPass" class="input-xlarge" name="cfpw" id="cfpw" style="display:inline">
</div>

multiple names in input fields

I have a text field that posts to Mysql. It works fine.
What I want to do is have the same field do another function using javascript. It appears thats its one or the other. Not both. Any help would be nice.
This posts to MySQL (adminpassword = Mysql Field):
<input type="password" name="adminpassword" id="adminpassword" class="password" placeholder="e.g. secretpassword">
This Javascript function works, but not post to Mysql: (Obviously)
<input type="password" name="password" id="adminpassword" class="password" placeholder="e.g. secretpassword">
I have tried: (Javascript works, but does not post to MySQL)
<input type="password" name="password adminpassword" id="adminpassword" class="password" placeholder="e.g. secretpassword">
This is the Javascript:
$(document).ready(function() {
$("#showHide").click(function() {
if ($(".password").attr("type") == "password") {
$(".password").attr("type", "text");
} else {
$(".password").attr("type", "password");
}
});
});
You could use a hidden field and copy the value (before the submit) from the password input to the hidden input:
<input type="password" name="adminpassword" id="adminpassword" class="password" placeholder="e.g. secretpassword">
<input type="hidden" name="password" id="adminpassword">

How Do I pass a value in a input box, to another input box

I am trying to pass values between boxes.
So, When a User types inside of the first text box:
<input type="text" placeholder="Your personal message" id="valbox"></input>
<input type="submit" name="design1" id="butval" value="Choose Design"></input>
Then they click the 'choose design' button, and what they typed in, gets passed to another
input text box on the same page.
this is the second input box i want to pass it to.
<input type="text" class="input-text" name="billing_last_name" id="billing_last_name" placeholder="" value="">
Any help would be much appreciated
thank you
Live Demo
Instead of a submit type input use a button type input.
HTML
<input type="text" placeholder="Your personal message" id="valbox"></input>
<input type="button" name="design1" id="butval" value="Choose Design"></input>
<input type="text" class="input-text" name="billing_last_name" id="billing_last_name" placeholder="" value="">
JS
window.onload = function(){
document.getElementById('butval').onclick = function(){
document.getElementById('billing_last_name').value = document.getElementById('valbox').value;
}
};
First add a clicklistener for the submit button and inside that callback pass the text through the elements
document.getElementById("butval").addEventListener("click", function(event){
var text = document.getElementById("valbox").value;
document.getElementById("billing_last_name").value = text;
event.preventDefault();
return false;
});
this is by far easiest in jquery given
<input type="text" placeholder="Your personal message" id="valbox"></input>
<input type="submit" name="design1" id="butval" value="Choose Design"></input>
<input type="text" class="input-text" name="billing_last_name" id="billing_last_name" placeholder="" value="">
use a simple
$("#butval").click(function(event){
$("#billing_last_name").html("<p>"+$("#valbox").html()+"</p>");
event.preventDefault();
});
but better change type="submit" to type="button" then you can remove the essentially unnecessary line event.preventDefault();

put cursor at end of text input's value

So, currently I have a text-input-field with a value that is also autofocused.
On page load, the value is selected / highlighted. Is there a way I can put the cursor at the end of the value text instead of highlighting it in javascript or CSS?
Here is a js fiddle where the autofocused text's value is highlighted: http://jsfiddle.net/TaGL5/
Here is the HTML code: <input type="text" value="value text" autofocus />
Upgrade to #harsha's answer
I found that to make solution work with Firefox,
we need temporary reset value to "not-equal of value", then set it back
<input type="text" autofocus value="value text" onfocus="var temp_value=this.value; this.value=''; this.value=temp_value" />
This works for me
<input type="text" autofocus value="value text" onfocus="this.value = this.value;"/>
Use Jquery for this:
$(function() {
var input = $("#txt1");
var len = input.val().length;
input[0].focus();
input[0].setSelectionRange(len, len);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="text" id="txt1" value="Lorem" style="width:400px;" />
But some browsers don't support enter code here property, in which case use this:
$(document).ready(function(){
$("#search").focus(function(){
if (this.setSelectionRange)
{
var len = $(this).val().length;
this.setSelectionRange(len, len);
}
else
{
$(this).val($(this).val());
}
});
$("#search").focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="search" type="text" value="mycurrtext" size="30" name="search" />
This question already exist on stackoverflow:
Reference1
Reference2
Use this, its nice work for me...
<input type="text" name="txt" value="value text" autofocus="" onfocus="this.setSelectionRange(this.value.length,this.value.length);">
OR add this line to your input element
onfocus="this.setSelectionRange(this.value.length,this.value.length);"
You can add this parameter to your text input field:
onmouseover="this.setSelectionRange(this.value.length,this.value.length);"
onfocus="this.setSelectionRange(this.value.length,this.value.length);"
NB: Works well under Chromium in 2017.
Select element by class or id, then focus, and then re-insert value.
<input type="text" class="element-to-autofocus" value="Some existed text" />
<script>
temp_el = document.querySelector('.element-to-autofocus');
temp_el.focus();
temp_value = temp_el.value;
temp_el.value = '';
temp_el.value = temp_value;
</script>

JQuery autocompleter for dynamic input boxes

I have a webpage with jquery generating dynamic html input boxes.
Something like this appears on the page.
<input type="text" id="numbers[]" ></input>
<input type="text" id="numbers[]" ></input>
<input type="text" id="numbers[]" ></input>
<input type="text" id="numbers[]" ></input>
These text-boxes all use the same autocompleter, is it possible in jQuery to point my autocompleter at all of these?
First of all id should be unique in the whole document so your code is not correct.
What you probably mean is
<input type="text" name="numbers[]" ></input>
<input type="text" name="numbers[]" ></input>
<input type="text" name="numbers[]" ></input>
<input type="text" name="numbers[]" ></input>
To enable autocomplete on those boxes just use the selector that will match them all
var data = "foo bar baz";
$('input[name^=numbers]').autocomplete(data);
You could add a div that wraps input and that is never changed, then upon creation of new input store its id in jquery internal cache, just like this:
var $input = '<input name=somename[] type="text"/>';
$('#mywrap').append($input);
$input.data('id', 'some id');
Then on you can access autocompleter in the following way:
$('#mywrap input').live('click', function() {
var id = $(this).data('id');
// and now do anything with the new id you have!
});

Categories