This question already has answers here:
How do I make an HTML text box show a hint when empty?
(22 answers)
Closed 6 years ago.
I would like to know how to put text in a textbox when the page loads. Example: If I have a login page, I would have 2 textboxes named "username" and "password". When the page loads I want the the textbox to load with "username" written inside, so I won't have to put a label for that outside. But when the user clicks inside textbox it should disppear. How do I do this?
<input name="q" onfocus="if (this.value=='search') this.value = ''" type="text" value="search">
...from the Stack Overflow search box.
You could also add the onblur event to check: if (this.value=='') this.value = 'search'
This would re-print the watermark when the user clicks outside the textbox and the field is empty.
A more modern way is to use "PlaceHolder"
<input type="text" placeholder="search" />
There are a lot of tutorials on how to do this. Here's one walkthrough using the jQuery javascript framework.
Here's another popular blog post about it, just using regular javascript.
In laymen's terms:
When focusing on the input, if the value is "Username" then set it to ""
When removing focus from the box, if the value is "" (i.e. nothing was entered), reset it to "Username" to still provide feedback to the user since they haven't yet entered data
The code:
<input value="Username" onfocus="if(this.value=='Username') this.value = ''" onblur="if(this.value=='') this.value = 'Username'" type="text" />
JS:
function clearDefault(ctl){
if(ctl.value==ctl.defaultValue) { ctl.value = ""; }
}
In your textbox include onfocus="clearDefault(this)" and set its text to "username" or "password".
See this article http://www.alistapart.com/articles/makingcompactformsmoreaccessible. Of course, if you are using jQuery, there are "Label over" plugins.
Related
I want to add a show password checkbox to my form.
When a user checks that checkbox password is shown.
Most of the examples that I found are using 2 inputs, one with type="text" and the other with type="password". And switch between these inputs according to the status of the checkbox.
it is simpler to change type of input to type="text", so why people use 2 inputs?
Be careful with using type="text" as a way of showing the password, as it exposes the user to saving the password in plain text in their autocomplete settings. I think the two input box approach is probably safer as you can stop the text one from being picked up by autocomplete by using autocomplete="off"
See this artcile describing the vulnerability: https://www.foxtonforensics.com/blog/post/uncovering-plain-text-passwords-in-internet-history
probably to make it work on old versions of IE, since IE 9 and below, do not allow dynamic change of type="password" to type="text". it throws an error "Could not get the type property"
I hope ur trying to ask that u want single password input field and show password button...Below is my answer
<input type="password" name="passwd" id="txtPassword" placeholder="Password" required="required">
<input type="checkbox" id="showhide"/>
<label for="showhide" id="showhidelabel">Show Password</label>
<script type="text/javascript">
$(document).ready(function () {
$("#showhide").click(function () {
if ($("#txtPassword").attr("type")=="password") {
$("#txtPassword").attr("type", "text");
}
else{
$("#txtPassword").attr("type", "password");
}
});
});
Simply, how can I do this?
<input type="hidden" value="some javascript value" />
I have a form whereby when a user clicks on Add More, more input fields are added via javascript.
I'm also using javascript-declared values to track and limit the number of fields a user can add.
I need a way for my php code to retrieve these javascript values.
Use append
$('#hidden').val('my Text');
input field should be
<input type="hidden" id="hidden"/>
the question is a bit vague, but i will give it a go
try adding a name as an array and then you can use get or post
<input name="myjavascriptinputs[]" type="hidden" value="some javascript value" />
in your php you will be able to use
foreach($_GET['myjavascriptinputs'] as $ajavascriptinput)
From the button you must be calling a javascript to add these fields dynamically. Simply append the code to that function to hand over these values to the field.
<input id="myinputfield[]" type="hidden" value="" />
<script>
function addOneMore(){
var newField = // code to add one more field
newField.value = newValue;
}
</script>
Will solve your purpose.
I was wondering if someone knows what controls the showing of previous form field entries in a form.
So for example, if in the name field, I go to type 'John' it appears below the field. Is that a feature of the browser or is it javascript or something?
Also, if it is the browser, is there a way I can turn this off for a given form?
You might be looking at autocomplete, if so turn it off with autocomplete="off" within the HTML of the relevant field:
<input type="text" name="firstname" autocomplete="off" />
References:
input element.
It's made by the browser, if you're working with HTML5 you can set a attribute to the input-element to remove it.
<input type="text" autocomplete="off" />
I just creating a booking system and I want that the users will choose a date from the calender and it'll show in input text - that I did!
Now I want to block the writing in the input text (just bring to calender writes there when the user choose a date).
How do I do it? I guess JavaScript, but how? I dont know JS very wall..
Thank you very much!
Give your element the readonly attribute, this will disallow users to type anything into it. However, you will still be able to write to add through javascript for example when a date is chosen. Here is an example:
<input type="text" id="txt" readonly="readonly">
JavaScript:
var el = document.getElementById('txt');
el.value = "Testing......";
Working Demo
<input type="text" id="someId" disabled="disabled" />
The disabled property will prevent any user input, but you can still write to it via your javascript calendar method.
For those who wants to prevent typing but not having the disabled style, can try:
<input type="text" onkeypress="return false;"/>
I have a usual login form consisting of two input fields, one for login, one for password. I am currently trying to add a control that will show entered password as plain text, so user can check it for typos.
The problem is that browsers (at least Firefox) do not allow dynamic changing of type attribute of input fields, so I cannot just change type="password" to type="text". Another problem is that browsers do not allow to get value of password field, so I can't create a new input type="text" and set its value to the password's one. I've seen several different approaches to this task, including this one, but they are working only if the password is typed and fail when browser autofills the password.
So, any suggestions to do this are welcome. I am using jQuery.
You can do something like this:
<input type="password" id="password">
<input type="checkbox" onchange="document.getElementById('password').type = this.checked ? 'text' : 'password'"> Show password
If I may, I don't think it's a great idea to show the password in text, for the following reasons:
It's not commonly done, so it will be confusing to the user
It means you are open to over-the-shoulder viewing of the password
I also think, if you just want to help users avoid typos, give them more chances before the password is disabled. I think the typical "3" that most sites implement is not really required, I'd suggest "10" attempts, or perhaps "5", if you wish to be really conservative, is quite acceptable. Just count it down for them, and let them resolve typos on their own.
Just my humble opinion.
I have never tried this myself but can't you just access the value property of the element?
if you have something like...
<input id="pw" name="pw" type="password" />
Then in JavaScript / jQuery...
var pass = document.getElementById('pw').value;
$('pw').val()
There is no any possibility to show autofilled password for security reasons. Anyone could see your password on your computer for this page if this is possible.
You have to deal with following for complete solution:
javascript is not allowed - then you should not display choose password checkbox
autocomplete is turned on - as I wrote, you're not able to show password filled this way. Eaighter switch off autocomplete or hide show password until user re-type password.
Autocomplete switch off by this jQuery
$('input').attr('autocomplete', 'off');
For adding checkbox on the fly you can use following jquery-showPassword plugin available at http://www.cuptech.eu/jquery-plugins/
$('.show-password').change(function() {
if ($("#form-fields_show-password").attr('checked')) {
var showValue = $('#form-fields_password').val();
var showPassword = $('<input type="text" size="50" required="required" name="form- fields[password]" id="form-fields_password" class="password required" value="'+showValue+'">');
$('#form-fields_password').replaceWith(showPassword);
} else {
var hideValue = $('#form-fields_password').val();
var hidePassword = $('<input type="password" size="50" required="required" name="form-fields[password]" id="form-fields_password" class="password required" value="'+hideValue+'">');
$('#form-fields_password').replaceWith(hidePassword);
}
});
Something like this will find the input area, and store the value in a variable called showValue. Then you can replace the element with type="password", with new html where type="text" and if the checkbox is unchecked the value will be dropped into password type field.
There is a problem with this method in that the password type value will be visible in the code, however to get round this you can always remove the value attribute from the password type and just force the user to re-type. If you can live with that in you application.
function change(){
id.type="password";
}
<input type="text" value="123456" id="change">
<button onclick="pass()">Change to pass</button>
<button onclick="text()">Change to text</button>
<script>function pass(){document.getElementById('change').type="password";} function text(){document.getElementById('change').type="text"; } </script>
Password: <input type="password" value="" id="myInput"><br><br>
<input type="checkbox" onclick="myFunction()">Show Password
<script>
function myFunction() {
var x = document.getElementById("myInput");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>