CODEWITHSUNDEEP
javascriptjqueryhtmlcssweb-development-server
Whimusical
Whimusical

Reputation: 6629

Disable vs readonly dont work for non-interactive but value keeper input

I am developing some web interfae, I would like to convert some INPUT elements in non-editable/non-changable but still showing the inputed value. How an be this done?

In Chrome at least, disabled attribute makes the inputed value disappear (unmarked checkboxes, non-filled radio buttons) but readonly label allows user to keep changing values. Why? Is this a Chrome thing? Whats the best wa for simply not-allowing interaction but mantaining and showing the preselected value so far?

EDIT: I am using jQuery´s

$('#deForm :input').attr('readonly',true);

and

$('#deForm :input').attr('disabled',true);

for this test. Both seem to be handled ok, since GUI shadows input elements. But none of them shows my expected functionality

EDIT2: I also tried to put 'readonly' and 'disabled' as the second argument in jQuery instead of 'true' but it has same effect

EDIT3: I also tried to add to readonly.

 $('#deForm :input').attr('readonly',true);
 $('#deForm :input').keypress(function(event){
      event.preventDefault();
 });

but behavior is the same as in plain readonly

Upvotes: 0

Views: 468

Answers (2)

Ram
Ram

Reputation: 144689

This is the default behavior of the readonly and disabled properties. You can use the preventDefault method of the event object.

<input type='text' value='something'/>


$('input[type=text]').keypress(function(event){
    if (something is true) {
       event.preventDefault()
       // or return false
    } else {
       //
    }
})

http://jsfiddle.net/2fKjX/

Upvotes: 2

Phillip Schmidt
Phillip Schmidt

Reputation: 8818

I know you said readonly didn't work, but I'm guessing you made a mistake on the syntax. What you want is this:

<input type="text" readonly="readonly" value = "Hi ima txtbox" id="whatever" class="whatever" />

Upvotes: 0

Related Questions