onClick input text readonly form use inline - html

I have problem with onclick input form is readonly but use it inline.
I can do only onclick is disable Example:
<input type="text" onClick=this.disabled=true />
this one is work but what I need is when onClick event is readonly I try this :
<input type="text" onClick=this.readonly=true />
but it still not work.

<input type="text" onClick="this.readOnly=true" />

There is a little difference between HTML <input> readonly Attribute and Text readOnly Property.
readOnly: The readOnly property sets or returns whether a text field is read-only, or not.
change readonly to readOnly, it will work correctly.
<input type="text" onClick='this.readOnly = true;' value='checkMe'/>
JSFiddle

This has been answered
onclick="document.getElementById('Tbox').readOnly=true"
http://www.webdeveloper.com/forum/showthread.php?146525-Toggle-READONLY

Related

How to disable a text inside input box?

How can I disabled text inside a input box?
<input type="text" value="Username">
User name should be disabled. But it should be click-able inside the input box.
How can I do that?
I believe you're looking to make the textbox read-only.
To make the textbox read-only, you can use readonly attribute. By making it readonly, user cannot change the value of the textbox. However, the textbox can be focused by clicking on it.
<input type="text" value="Username" readonly="readonly" />
There's other property called disabled. If you use this on textbox, user cannot change the value as well as you cannot click on it.
<input type="text" value="Username" disabled="disabled" />
EDIT
only Username will be disabled. When a user click on box , Username should vanish
You can use placeholders.
<input type="text" placeholder="Username" />

how to make a textbox non clickable using html

I want to make textarea non-editable and non-clickable using html.
I have given the "readonly=true" for the tags; however, it is still clickable but non-editable. The readonly textarea are getting selected in Safari browser. Please help. I do not want the text area and text box to get selected.
Thanks
Using readonly attribute on element means that the element is not editable, however the value of field gets submitted when the form is submitted.
While disabled element is not editable as readonly but its value doesn't get submitted on form submission.
so, if you want to submit the value of the field, use:
<input type="text" name="textbox1" readonly />
else
<input type="text" name="textbox1" disabled="disabled" />
Try disabled="disabled". This will disable textbox / textarea, so it won't be selected. Also, the value won't be submitted on form submission.
For textbox :
<input type="text" name="textbox1" disabled="disabled" />
For textarea :
<textarea name="textarea1" disabled="disabled" /></textarea>
In HTML5, only disabled attribute will also work. The value is not compulsory. However, for XHTML Strict you will need key & value pair.
<textarea disabled="disabled"></textarea>
Try this i hope it works,
<input type="text" name="country" value="anytext" readonly>
Why don't you try with
disabled="disabled"

Input box how to stop input?

I have a HTML page.
I want to have a input box, that has a default value, that people can select, but not write over. It if for a share link to the page.
How can I do this?
EDIT: Using readonly="readonly" works and satisfies the solution, but the mouse pointer becomes a stop sign. I have chosen to use pure text instead of putting the share link into an input box. A javascript/Jquery solution will be possible but I don't use scripts on my website.
give input box readonly property like
<input type="text" id="a" value="abc" readonly="readonly" />
you can use it as
<input type="text" id="a" value="abc" disabled="true"/>
you can also dynamically change this attribute using javascript as per your requirement.
add
readonly="readonly"..........
please notice :
readonly - is a markup class
we dont have to write x=x
so we can only write x
hence
<input type="text" id="a" value="abc" readonly />
also work
Method 1
input type="text" id="a" value="abc" disabled="true"
Method 2
input type="text" id="a" value="abc" readonly="readonly"
In first case, text field will be disabled and you will not be allowed to select the value, where as in the second method you can select it, but not able to edit it..
Disabled field are not accessible in successor pages.
You can also dynamically change this attribute using javascript as per your requirement.

Blanking out form elements?

I often form elements that are blanked out (e.g. the content is un-editable, you can't focus, gray overlay). What styling or attribute is applied to the form elements to create this effect?
Any answers will be very much appreciated :).
disabled="1" / or just disabled. e.g. <input disabled="1" ...
The form element is disabled;
See here
you create a disabled input like this:
<input type="text" name="fieldname" disabled="disabled" />
This also works for all other form elements except elements with type='hidden'
You should be using the disabled attribute:
HTML button disabled Attribute
HTML input disabled Attribute
The disabled attribute specifies that a button should be disabled.
A disabled button is unusable and un-clickable.
The disabled attribute can be set to keep a user from clicking on the
button until some other condition has been met (like selecting a
checkbox, etc.). Then, a JavaScript is required to remove the disabled
value, and make the button usable.
The syntax use is:
<button disabled="disabled">
<input disabled="disabled" />
there is disabled to create the grey overlay
<input disabled type="text" name="myInput">
and readonly to make it focus but uneditable
<input readonly type="text" name="myInput">

Is there a way for me to make an <input> field non-editable

I have some fields that are currently input fields. Some should allow edits and others not. Without changing them from input fields, is there a simple way to make it so I cannot edit these? I'm looking for just one CSS or other kind of property if that exists.
thanks
Mariko
You can add the readonly="readonly" attribute to the input elements.
Or disabled: <input disabled>
You can style both with CSS:
input:disabled or input[disabled] for disabled
input[readonly] for readonly
<input type="text" id="id" name="id" value="" readonly="readonly" />
either
<textarea ... readonly="readonly"></textarea>
and/or :
<textarea ... disabled="true"></textarea>
I prefer readonly -attribute, which just prevents modifying. Disabled attribute makes the whole area look disabled (grey) and disabled textarea's data isn't submitted, when a form is posted.