disable editing default value of text input

Question

I have a search form   lt input id  price from  value  price from   gt   lt input id  price to  value  price to   gt   lt button gt search lt  button gt    How can I disable editing of dafault text  When user starts to type in price amount it s not possible to edit  price from   and  price to   but they stay in input field  I ve tried different mask plugins for jquery but they didn t show default text untill you focus on field and don t provide option for custom text  Only placeholders an chars

User · Answer

Probably due to the fact that I could not explain well you do not really understand my question  In general  I found the solution   Sorry for my english

User · Answer

I m not sure I understand the question correctly  but if you want to prevent people from writing in the input field you can use the disabled attribute    lt input disabled  disabled  id  price from  value  price from   gt

User · Answer

How about disabled disabled    lt input id  price from  value  price from   disabled  disabled  gt                Problem is if you don t want user to edit them  why display them in input  You can hide them even if you want to submit a form  And to display information  just use other tag instead

User · Answer

I don t think all the other answerers understood the question correctly  The question requires disabling editing part of the text  One solution I can think of is simulating a textbox with a fixed prefix which is not part of the textarea or input   An example of this approach is    lt div style  border 1px solid gray  color  999999  font-family arial  font-size 10pt  width 200px  white-space nowrap   gt Default Notes lt br  gt   lt textarea style  border 0px solid black   cols  39  rows  5  gt  lt  textarea gt  lt  div gt    The other approach  which I end up using is using JS and JQuery to simulate  Disable  feature  Example with pseudo-code  cannot be specific cause of legal issue         disable existing notes by preventing keystroke   document getElementById  txtNotes   addEventListener  keydown   function  e        if  cursorLocation  lt  defaultNoteLength                 e preventDefault                  disable existing notes by preventing right click     document addEventListener  contextmenu   function  e            if  cursorLocation  lt  defaultNoteLength               e preventDefault              Thanks  Carsten  for mentioning that this question is old  but I found that the solution might help other people in the future

User · Answer

You can either use the readonly or the disabled attribute  Note that when disabled  the input s value will not be submitted when submitting the form     lt input id  price to  value  price to  readonly  readonly  gt   lt input id  price to  value  price to  disabled  disabled  gt

[html] disable editing default value of text input

Examples related to html