In my form i am using readonly fields.

How to make this readonly fields unclickable I don't want to use disabled fields, just make readonly fields unclickable any one have idea plz share.

In my form i am using readonly fields.

How to make this readonly fields unclickable I don't want to use disabled fields, just make readonly fields unclickable any one have idea plz share.

• javascript
• php
• html

• Unclickable how exactly ? – adeneo Commented Jan 19, 2015 at 6:57
• What do you mean by "unclickable"? Do you mean that you don't want the user to be able to focus the element, then that is the default behavior for inputs with the readonly attribute. – rioc0719 Commented Jan 19, 2015 at 6:59
• the fields are readonly but when ever i click on field it focuses(clickable) but not editable it must not be clickable @adeneo,@rioc0719 – Waqas Khan Commented Jan 19, 2015 at 6:59
• That's not happening in my browser, a readonly input is not clickable, nor focusable, but the text can be highlighted and copied, is that what you want to avoid ? – adeneo Commented Jan 19, 2015 at 7:02
• jsfiddle.net/jhh5mr9x – adeneo Commented Jan 19, 2015 at 7:03

4 Answers 4

You can also use the property disable to make the input unusable and unclickable. I think it's more clear and efficient way.

Here is the the difference between readonly and disable:

<div>
  <input disabled type="text">
  <input readonly type="text">
  <input type="text">
</div>

Call the blur event when input is focused.

<input readonly onfocus="this.blur">

I searched and i found the solution here it is.

<input type="text" readonly="readonly" id="#unclickable" />
<script>
  $("#unclickable").focus(function(){
  $(this).blur(); 
  });
</script>

I found a much better solution to your problem :)

Assuming you have an input field as :<input type = "text" id = "textfield" >

You need to modify 2 things, 1: Your HTML declaration should be like :<input type = "text" id = "textfield" readonly> 2: Go to your css and add the following lines of code

#textfield:hover{
cursor:default;
}
#textfield:focus{
cursor:default;
outline:none;
}

Explanation: It'll still be clickable but we are removing any default style changes happening due to click event to none. i.e. a white border which appears is manually removed. Therefore you can pretty much simulate the effect that nothing is being clicked.