Got a password field, and ideally we want people to type their password rather than copy and paste it in. Is there an easy way using Javascript?
Not consistently across all browsers. Most browsers (not Opera, Firefox 2) support the cancellable onpaste event:
document.getElementById("password").onpaste = function () {
return false;
}
https://developer.mozilla.org/en/DOM/element.onpaste
First things first: this a bad idea.
You could use the key press events on the password field to detect what key was pressed, to check whether the change in the password field matches the event (if they press "a", then check if the letter "a" was indeed inserted), and restore the previous value (with an error message) if it does not.
Of course, people will just have their web browser remember their password for them.
Some banks replace the password field with an image of digits where you have to click to enter the password (here, for instance). You could use JavaScript to replace the password field with that image when JavaScript is enabled.
$(':password').bind('paste', function(e) {
return false;
})
You can measure the time it takes from the first to the last change. If it was too short, clear the field...
You can do this with the help of Polling Technique. Hoewver this is not the suggested way for textboxes. If you have observed some of the Bank site allows you to enter password via a keypad (with mouse clicks). And password field is disabled for keyboard entry
Related
I'm devlopping a web app using Phonegap and HTML5.
When focusing on a text input, I've been asked to open the 'alpha-numeric' keyboard with the 'numeric' keys displayed.
Is that even possible?
Telephone: <input type="tel" name="usrtel">
This opens up a alphanummeric keyboard. This could be any number you want, not only a telephone number :-)
The type "tel" is new and comes from html5. A overview about all input types can be find here: W3Schools
Edit from Mon. 1st of Sept. 2014, 4:30pm:
I'm editing my answer because of the answer Jonas Grumann has given. You should use the <input type="tel" just for numbers only. Like the type described: telephonenumbers for example. This input type will not recognize it, if the user enters decimal numbers.
If you want the user to enter decimalnumbers you have to do it with the here given answer "pattern" you should use them then like this:
HTML
<input type="text">
and JS (Please consider: These are commands for which you need jQuery/jQuery-mobile
$('input[type="text"]').on('touchstart', function() {
$(this).attr('type', 'number');
});
$('input[type="text"]').on('keydown blur', function() {
$(this).attr('type', 'text');
});
And for the sake of completeness i'm going to quote the user that has given this answer here -> Force iOS numeric keyboard with custom currency pattern
The idea is simple. The input starts off and ends up with type="text",
but it briefly becomes type="number" on the touchstart event. This
causes the correct iOS keyboard to appear. As soon as the user begins
to enter any input or leave the field, the input becomes type="text"
once again, thus circumventing the validation.
There's one downside to this method. When the user returns to an input
that has already been filled out, the input will be lost (if it
doesn't validate). This means the user won't be able to go back and
edit previous fields. In my case, this isn't all that bad because the
user may want to use the calculator over and over again with different
values, so automatically deleting the input will save them a few
steps. However, this may not be ideal in all cases.
It looks like Mobile Safari supports the new HTML5 input type
attributes of email, number, search, tel, and url. These will switch
the keyboard that is displayed. See the type attribute.
If there are more questions, let me know and i'm going to edit again.
I have created a nice cross-browser utility which ensures that form "placeholders" behave in the same way (including IE which does not implement them)
However, this has created a different problem when a user fills a form and the browser helpfully provides an auto-suggest for the remaining fields in the form, eg, for a registration form: You might type your name, and the browser will auto-suggest your surname, email address, postal address, etc...
I don't care what the auto-suggested values are, but I need find a way of capturing "event" on each field so I may hide my implementation of the place holder.
I've had a look at the DOM elements in Chrome to see if the auto-suggest value is stored in a custom attribute, but have been unsuccessful.
Has anyone else seen or experienced this? Does anyone know if its even possible to capture such an event?
NOTE: This issue disappears when the user accepts the auto-suggest, and this becomes an auto-complete, which fires a change event on the fields; so I only need to capture the suggest event
I have produced the following script which "detects" when the fields have become auto-suggested by Webkit:
I am assuming anyone using this knows Underscore and jQuery.
var $form = $('form'),
autoCompleteSetting = $form.attr('autocomplete');
if (_.isUndefined(autoCompleteSetting) || autoCompleteSetting === "on") {
_($form.find('input')).each(function($input){
setInterval(function() {
if ($input.is(":-webkit-autofill")) {
// do your code here to detect the webkit autofill setting
}
}, 100);
});
}
I personally have put the webkit-autofill check into a ternary operator.
Obviously use at your own risk; having these intervals running for every field on your page every millisecond may cause problems for some users!
I have an input tag with password type on my website.
<input type="password">
With iPad or iPhone, it shows always the last letter when you are typing a password.
My problem is that I do a lot of demonstrations of my website with iPad.
I don't want that iPad shows the last letter when I'm typing my password.
Can I fix this by modifying something on my website?
No, iOS shows the last letter of the password typed by default and there is no way to disable that.
For demonstration purposes, you have a few options that I can think of. If using a projector, or TV-out, disconnect the device or turn off the screen while entering the password or you can set up a "demo" account for whatever you are going to demo.
By setting up a "demo" account (and this is just a personal thought), you can continue without skipping a beat (compared to turning off a screen, etc.), and if the viewers of your presentation see a "demo" account login / password it shouldn't matter too much, right?
Also, this should go without saying, if using a demo account, make sure it has limited access, obviously!
The iOS password control lets you paste a password into it (even the iTunes store password popup dialog).
Why don't you use a password app such as pwSafe to store and then copy the password to the clipboard, or even precopy the password into the clipboard before the demo? That way you haven't got to reinvent the password control, or mess around with demo accounts.
The "simplest" thing is probably to create a custom input which listens for the keys and stores the actual key values while just displaying • or * in the field.
Just attach a key listener and display a * for each letter you enter, so you know that you're actually adding input.
Type into the field on the left, I'm displaying what I'm collecting in the field on the right while only showing asterisks where you type. It needs a bit of work to detect backspace and capitals and such, but you get the idea.
example on fiddle: http://jsfiddle.net/d94P5/
Example
<input type="text" id="password">
<input type="text" id="hiddenValue">
Javascript
var field = document.getElementById("password")
var realValue = "";
field.onkeydown = function(evt){
realValue += String.fromCharCode(evt.keyCode)
this.value = realValue.replace(/./g,"*");
document.getElementById("hiddenValue").value = realValue
return false;
}
Maybe create a temporary password to a dummy account with strictly limited access, and configure your site to automatically disable that account and expire the password at the end of your demo hour.
I have a input text box disabled:
<input type="text" name="name" disabled="disabled" />
In IE and in Chrome you can copy and paste the value populated in that input field but in Firefox you cannot.
Firefox does not allow clipboard manipulation through JavaScript for valid security concerns.
Any suggestion? Is there a work around this?
readonly="readonly" will do the job
it should be supported by the major browsers
I don't like using readonly="readonly", ever. It leaves the field focusable and reachable via tab keypress and, if, god forbid, the user hits the backspace key while the read-only field is focused, then most browsers treat it like the user hit the 'back' button and bring up the previously viewed page. Not what you want to see happen when you're filling out a large form, especially if you are using some archaic browser that doesn't preserve the form data when you hit the 'next' button to return to it. Also very, very bad when using some single-page web application, where 'back' takes you to a whole other world, and 'next' doesn't even restore your form, much less its data.
I've worked around this by rendering DIVs instead of input fields when I need the field disabled (or PRE instead of a textarea). Not always easy to do dynamically but I've managed to make fairly short work of it with AngularJS templates.
If you have time, head over to the Mozilla Bugzilla and ask them to fix it.
tl;dr: Support for selecting and copying text in a disabled field is unreliable; use the readonly attribute or a non-input element, such as a <span> instead, if this functionality is necessary. Use JavaScript to modify the behavior of the readonly input to prevent unwanted behavior such as going back a page when someone hits the backspace key while the readonly input has focus.
*UPDATE: 2018.12.24
The spec has changed since this answer was originally posted (thanks to Wrightboy for pointing this out); it now includes the following caveat with regards to disabled fields:
Any other behavior related to user interaction with disabled controls, such as whether text can be selected or copied, is not defined in this standard.
— https://html.spec.whatwg.org/multipage/input.html#the-readonly-attribute
Disabled fields still cannot receive focus nor click events.
Because the standard does not define whether or not text within disabled controls can be selected or copied and because at least one major browser doesn't support that functionality, it's probably best to avoid relying on that behavior.
Original Answer
This is the expected behavior for a disabled field (as of the original date of this answer). IE and Chrome are being generous, but Firefox is behaving appropriately.
If you want to prevent the user from changing the value of the field, but you still want them to be able to read it, and/or copy it's value, then you should use the readonly attribute. This will allow them to set focus to the element (necessary for copying), and also access the field via the tab button.
If you are concerned about a user accidentally hitting the backspace button inside the readonly field and causing the browser to navigate back a page, you can use the following code to prevent that behavior:
document.addEventListener("DOMContentLoaded", function() {
var inputs = document.querySelectorAll('[readonly]');
for(var i=0; i < inputs.length; i++){
inputs[i].addEventListener('keydown', function(e){
var key = e.which || e.keyCode || 0;
if(key === 8){
e.preventDefault();
}
})
}
});
<input value="Hello World" readonly=readonly />
As quick answer, one can have another not disabled element to enable + copy/paste + redisable your input text, like this:
$('#btnCopy').click(function(){
$('#txtInputDisabled').removeAttr('disabled');
$('#txtInputDisabled').select();
document.execCommand("copy");
$('#txtInputDisabled').attr('disabled','disabled');
});
You can se my complete response to this post
Refer to my post to the same question. It does the following:
Makes the textbox just like readonly without using the readonly attribute on the input tag, but will honor tab index and set focus
Supports all clipboard functions win and mac with mouse or keyboard
Allows undo, redo and select all
Restrict HTML input to only allow paste
You can accomplish this in share point by utilizing the contenteditable attribute as follows with jquery.
$("#fieldID").attr("contenteditable", "false");
This will allow the user to highlight the text and copy it but will not allow them to enter anything in the field.
We're hoping to detect a keypress and the key from a user typing outside of a form field. And append that key to the form field and focus the user back into the form field. Essentially, hijacking any and all key events, and using placing them in a form field.
Any help would be greatly appreciated. We're happy using jquery for this type of client-side JS. We've gotten as far as detecting the keypress events, but focusing and appending that key to a particular field on the page is a bit beyond us.
Listen for keydown on window.
var input = $("input");
$(window).keydown(function(e) {
input.focus(); // focus the input
input.val( input.val() + String.fromCharCode(e.which));
return false;
});
You may need to tune this code up, but you'll get the idea.