What's the difference between disabled=disabled and readonly=readonly for HTML form input fields?
A readonly
element is just not editable, but gets sent when the according form
submits. A disabled
element isn't editable and isn't sent on submit. Another difference is that readonly
elements can be focused (and getting focused when "tabbing" through a form) while disabled
elements can't.
Read more about this in this great article or the definition by w3c. To quote the important part:
Key Differences
The Disabled attribute
- Values for disabled form elements are not passed to the processor method. The W3C calls this a successful element.(This works similar to
form check boxes that are not checked.)- Some browsers may override or provide default styling for disabled form elements. (Gray out or emboss text) Internet Explorer
5.5 is particularly nasty about this.- Disabled form elements do not receive focus.
- Disabled form elements are skipped in tabbing navigation.
The Read Only Attribute
- Not all form elements have a readonly attribute. Most notable, the
<SELECT>
,<OPTION>
, and<BUTTON>
elements do not have readonly
attributes (although they both have disabled attributes)- Browsers provide no default overridden visual feedback that the form element is read only. (This can be a problem… see below.)
- Form elements with the readonly attribute set will get passed to the form processor.
- Read only form elements can receive the focus
- Read only form elements are included in tabbed navigation.
Why `readonly`, `disabled` and `required` in same input field text is not working properly?
What actually happen is that by default(HTML Implementation of Validations), the validation in HTML will not fire if a field is read-only or disable.
The Reason to it is simple. If the field is empty with attribute disabled or read-only, and a required validation is applied, the form could not be valid at any time.
It seems like there is no direct and ethical solution to this, but the indirect solution could be:
i) Handeling key-up/key-down events so that input could not be added.
jQuery Code:
$('input').keypress(function(e) {
e.preventDefault();
});
ii) For disabling control, I would suggest not to add the datepicker to the element until you want. Later, you can add it using JS when needed(In your case, register datepicker on select list changed event).
Also, you can use Enable and Disable jQuery events if you are using jQuery UI Datepickers like below:
$("#txtSearch").datepicker("enable");
$("#txtSearch").datepicker("disable");
For further reading, you can have a look to this link. This is a discussion on Bootstrap validation, but it applies to pure HTML too.
Hope, this will help.
What is the difference between readonly=true & readonly=readonly?
Giving an element the attribute readonly
will give that element the readonly status. It doesn't matter what value you put after it or if you put any value after it, it will still see it as readonly. Putting readonly="false"
won't work.
Suggested is to use the W3C standard, which is readonly="readonly"
.
HTML form readonly SELECT tag/input
You should keep the select
element disabled
but also add another hidden input
with the same name and value.
If you reenable your SELECT, you should copy its value to the hidden input in an onchange event and disable (or remove) the hidden input.
Here is a demo:
$('#mainform').submit(function() { $('#formdata_container').show(); $('#formdata').html($(this).serialize()); return false;});
$('#enableselect').click(function() { $('#mainform input[name=animal]') .attr("disabled", true); $('#animal-select') .attr('disabled', false) .attr('name', 'animal'); $('#enableselect').hide(); return false;});
#formdata_container { padding: 10px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div> <form id="mainform"> <select id="animal-select" disabled="true"> <option value="cat" selected>Cat</option> <option value="dog">Dog</option> <option value="hamster">Hamster</option> </select> <input type="hidden" name="animal" value="cat"/> <button id="enableselect">Enable</button> <select name="color"> <option value="blue" selected>Blue</option> <option value="green">Green</option> <option value="red">Red</option> </select>
<input type="submit"/> </form></div>
<div id="formdata_container" style="display:none"> <div>Submitted data:</div> <div id="formdata"> </div></div>
In google chrome version 54 disabled fields are unselectable
If someone need a solution for exactly disabled button case i found only way to do it with js copy button implementation through jquery
$( document ).ready(function() {
$( "input[type='text']:disabled" ).each(function( index, value ) {
var $element = $(value);
var width = $element.outerWidth();
var height = $element.outerHeight();
var $appendToElement;
// Wrapper element by relative positioned div
$element.wrap("<div>")
$appendToElement = $element.parent();
$appendToElement.css({"position":"relative"});
$("<div>")
.css({
'position': 'absolute',
'top': 0,
'margin-top': $element.css('border-top-width'),
'margin-left': $element.css('border-left-width'),
'width': width,
'height': height,
'z-index': 10,
'cursor': 'pointer',
})
.hover(
function() {
$(this).html("Click to copy");
},
function() {
$(this).html("");
}
)
.click(function() {
copyToClipboard( $(this).parent().find('input').val() );
$(this).html("Copied");
})
.appendTo( $appendToElement );
});
});
function copyToClipboard(text)
{
if (window.clipboardData && window.clipboardData.setData) {
// IE specific code path to prevent textarea being shown while dialog is visible.
return clipboardData.setData("Text", text);
} else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
var textarea = document.createElement("textarea");
textarea.textContent = text;
textarea.style.position = "fixed"; // Prevent scrolling to bottom of page in MS Edge.
document.body.appendChild(textarea);
textarea.select();
try {
return document.execCommand("copy"); // Security exception may be thrown by some browsers.
} catch (ex) {
return false;
} finally {
document.body.removeChild(textarea);
}
}
}
How do I make a text input non-editable?
<input type="text" value="3" class="field left" readonly>
No styling necessary.
See <input>
on MDN https://developer.mozilla.org/en/docs/Web/HTML/Element/input#Attributes
Disable a textbox using CSS
CSS cannot disable the textbox, you can however turn off display or visibility.
display: none;
visibility: hidden;
Or you can also set the HTMLattribute:
disabled="disabled"
Cross-Browser: Different behaviors for disabled input fields (the text can/can't be copied)
Change your field from disabled
to readonly
. That is the correct attribute for the behaviour you want.
Don't waste time hacking a javascript solution together as it will be even more flaky than the minor differences in browser behaviour.
If the issue is that you want your readonly fields to look like disabled fields, it's fairly easy to style an input with a readonly
attribute set. You don't need to change behaviour to change appearance.
input[readonly] { background: #EEE; color: #666; border: solid 1px #CCC;}
<input readonly value="I am readonly">
Related Topics
Implement an Input With a Mask
Using External Images For CSS Custom Cursors
How to Target a Specific Column or Row in CSS Grid Layout
Html5 Best Practices; Section/Header/Aside/Article Elements
How to Make a HTML Page in A4 Paper Size Page(S)
Open Link in New Tab or Window
How to Expand Floated Child Div'S Height to Parent'S Height
"X-Ua-Compatible" Content="Ie=9; Ie=8; Ie=7; Ie=Edge"
Draw on Html5 Canvas Using a Mouse
Minimum and Maximum Value of Z-Index
How to Get Centered Content Using Twitter Bootstrap
Using HTML and Local Images Within Uiwebview
How to Get HTML 5 Input Type="Date" Working in Firefox And/Or Ie 10
Col-Xs-*' Not Working in Bootstrap 4
Make Absolute Positioned Div Expand Parent Div Height
How Does Jquery Work When There Are Multiple Elements With the Same Id Value
How to Prevent Downloading Images and Video Files from My Website