Develop Reference

Making a text field uneditable and not just readonly

When i click on a textfield, i get a dropdown so the user could select a value from the list.
After the user selects the date from the dropdown, he/she could edit the date by even adding characters to it. So i want to find a way to prevent this. I thought of making the field un-editable. So i used readonly but, this prevents the user from clicking and displaying the list. So can someone tell me how can i make the field uneditable.
<input id="datePiccc" type="text" class="dates" />

You can use the below code. This will make the text input field clickable but when the user types in anything, nothing would happen.
document.getElementById('datePiccc').onkeydown = function(e){
e.preventDefault();
}
Fiddle Demo
As pointed out by nnnnnn, onkeydown is a better option than onkeypress as it would stop the delete and backspace key functions.
You could add the below also to your code to nullify Cut and Paste events1. (Note: Not doing anything for Copy as that operation isn't going to change the value of the text field).
document.getElementById('datePiccc').oncut = function(e){
e.preventDefault();
}
document.getElementById('datePiccc').onpaste = function(e){
e.preventDefault();
}
1 I think these should work in all browsers. Currently tested in Chrome 31, Opera 15, IE10 and FireFox 24. (Note: In IE10, there is an x mark which appears on the right side of the input field which when clicked clears the entire field value. Could not find a way around this.)

I'm assuming the text field is being set in javascript. If so, you can use the following line to disable the field:
document.getElementById('datePiccc').disabled=true;
The input will remain as it is and the value from the selection field can also be set.

Disable the input in JQuery as
$("#datePiccc").attr("disabled", true);
And in pure JS
document.getElementById('datePiccc').disabled = true;
May be this can help!

Closing keyboard on iPad in div contenteditable

Is there a way force the keyboard on iPad to close on blur of div 'contenteditable'??
Here is a basic jsfiddle: http://jsfiddle.net/j_tufte/7HDmN/
I'd like to have the keyboard close when a user clicks on the button.
Any thoughts super appreciated.
Thanks.

As you have mentioned in your comment, element.blur() unfortunately doesn't work on an editable div. But you could instead move the focus to an actual input field and remove it again right away:
$('#otherBox').on('click', function(){
$('#orInput').focus().blur();
});
(This uses your jsFiddle HTML code).
There are downsides to this approach: you need another input field (which you can't set to display: hidden or visibility: hidden, but you can set it's size to 0 and opacity: 0). Also, the view may scroll to the location of this input field when the above handler is invoked. So you will need to place the second input field right next or behind to the editable div.
You will also need to take care of the input field not being targeted by the previous/next buttons: set it disabled.
<input id="orInput" disabled="disabled" style="width:0; height:0; opacity:0" type="text" />
For focussing/blurring you will then need to enable the field:
$('#otherBox').on('click', function(){
$('#orInput').removeAttr("disabled")
.focus().blur().attr("disabled", "disabled");
});
However, this is definitely a workaround. I haven't found any other solution yet (e.g. removing the contenteditable attribute doesn't work) but I'd very much like to hear other ideas.

You should be able to do exactly that -- attach an event listener to the button and use it to blur() the input field that caused the keyboard popup (use JavaScript to get a handle on that element and then call it's blur method). That supposedly closes the iPad keyboard.

Allow Copy/Paste in a disabled input text box in Firefox browsers

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.

Trigger JavaScript event when using Google auto fill on Firefox

I have a form, in which I am disabling the submit button until an user has typed in all the mandatory fields. I was initially using onkeyup to keep a tab on the mandatory fields and enable the button when all the mandatory fields are filled.
But I had users complaining that they filled in the form using AutoFill button on the Google toolbar and the submit button was still disabled.
I fixed this problem in IE by calling the onpropertychange event for each input element and it worked nicely.
But in Firefox, I couldn't find an event which will get triggered when the Google autofill button is clicked.
Help much appreciated.

Thanks for your answers. I had to respond quickly to this issue hence I used the 'setTimeOut()' function to check for mandatory fields and enable the submit button.
$().ready(function() {
CheckRequiredFields();
timeOutRtn = setTimeout("AutoMonitorMandatoryField()", "3000");
});
function AutoMonitorMandatoryField() {
if ($("#btnSave").attr("disabled")) {
CheckRequiredFields();
timeOutRtn = setTimeout("AutoMonitorMandatoryField()", "3000");
}
}
crescentfresh - I will look into the DOMAttrModified event and see if I can get it to work for me.Thanks

Judging from this google toolbar support thread, it seems autofill is not only a huge PITA for developers, but also very difficult to turn off. As of Aug 09 google claims it will honor the autocomplete="off" attribute on the containing form but as of today this feature does not seem to be released yet.
You used to be able to give your input elements non-sensical names (eg name="xx_Address_32423423") to confuse autofill (and thereby effectively disable it), but they've made autofill more "intelligent" by looking at substrings within your element names in order to determine if the field can be autofilled or not (again, judging from complaints in that thread).
In your case, you may as well roll with the punches and find an equivalent for onpropertychange for Firefox. Have a look at the DOMAttrModified event. Specifially, try checking the event.attrName property to see if the value has been changed by autofill:
function realOnChange(event) {
var attrName = event.propertyName || event.attrName;
if(attrName === 'value') {
// etc
}
}
The check for event.propertyName is to stay compatible with your current onpropertychange implementation (if that is even possible).

There's no need to add complex setTimeOut nor setInterval.
Just catch the "change" event of any refillable textbox of the form, go through every refillable field and if it's not empty hide the label

Is there any way to reset the cursor to the beginning of a textbox when it loses focus?

I have some input[type="text"] textboxes on my form that are sometimes not wide enough for the content that gets typed into them.
Currently, if a user types more text that fits (but is under maxlength), the textbox scrolls as you would expect. When they tab out of the textbox, the textbox stays scrolled to the "end" of what they typed.
I am trying to find a way to reset the textbox to the beginning when a user tabs out of the field.
I looked at the suggestion here:
Set keyboard caret position in html textbox
...but it does not work in an onblur event because the solution actually causes the textbox to get focus again briefly before bluring again which causes an infinite loop.
Before I give up, does anyone have any solution to resetting the cursor to the beginning of a textbox in an onblur event?

In Internet Explorer, you can set the scrollLeft property. That doesn't work in Firefox, but if you reset the value to itself, the it will scroll back to the beginning. Apparently either method works in Chrome. I don't have any other browsers available to test at the moment.
$("input[type=text]").blur(function() {
this.value = this.value; // Firefox
this.scrollLeft = 0; // Internet Explorer
});
I used jQuery because that's what I'm used to, but you can adapt it to whatever framework/method you use for events.