5

I have list of input fields. In which some are readonly fields. I am using .keyup() event to trigger when something changes in input field. But it won't effect for readonly field. Somehow i want to change those fields also . Any help?

SSS
  • 1,380
  • 3
  • 28
  • 48
  • _"Somehow i want to change those fields also"_ - Huh? Are you asking how to change the value of a readonly field with JS? Or asking if there's a way to automatically trigger an event when a readonly field is changed by JS? – nnnnnn Aug 13 '12 at 06:25
  • asking for : is there a way to automatically trigger an event when a readonly field is changed by js? – SSS Aug 13 '12 at 08:45

2 Answers2

9

If you call focus on a readonly input field, then keyup events will fire. However, typing in that field won't change its value (afterall, it's read-only). Perhaps what you need is to listen for changes in its value attribute instead?

I'd suggest listening to input and propertyChange as this answer suggested:

$('input').bind('input propertychange', function() {
    // Do something
});

This way when your input value changes (from any means) you'll be notified. Edit: does not work if you programatically change the value - for this case, the only cross-browser viable alternative involves polling (for instance this). A better option could be using a framework such as knockout.js, that automates this for you while providing clear separation between view and model. Here's an example.

Update: I recall reading your comment in a deleted answer, stating that you're programatically setting the value of the input, is that correct? (could some user with 10k rep please restore it?) In that case, why not have the code that is changing the value trigger the listener directly?

$(link).click(function() {
    $(readonlyInput)
        .val("some val") // Update the value
        .trigger('keyup'); // Trigger the listener
});
Community
  • 1
  • 1
mgibsonbr
  • 21,755
  • 7
  • 70
  • 112
  • is that works for dateselector field also?In which on selecting new date value changes for readonly field.? – SSS Aug 13 '12 at 06:06
  • As I said in my edit, this solution does not work whan you programatically change the value (it **does** work when the field is not readonly, even for `type="date"` when you choose a date in the graphic selector). But it's easy to do it with knockout.js, [here's an example](http://jsfiddle.net/H68Sb/) (this particular case does not require jQuery at all, but often it's easy to combine both frameworks in the same page if necessary). Sorry if that does not answer your question, but I really don't know any way of doing it besides polling the input value... or just calling the listener directly... – mgibsonbr Aug 13 '12 at 07:11
1

It seems readonly fields do not listen events that implies input like "input", "keyup" etc, and if you think this is a logical behavior, still they listen to the change event, then why not use "onchange" it instead of the inputs event, with jQuery it is rather easy: for

 $("input").filter(function(){
      return $(this).prop("readonly");      
 }).on("change", function(){
      // do something
 });

And for the rest of inputs that aren't readonly

 $("input").filter(function(){
      return !$(this).prop("readonly");      
 }).on("keyup", function(){
      // do the same thing something
 });
Lu32
  • 810
  • 1
  • 9
  • 18