4

How to enable cursor move while using readonly attribute in input field in chrome browser, working fine with firefox.This is to observe the full value in the input box which will not be editable.Knowing the fact that this is a browser dependent feature, any other way to overwrite this ?

4

2 回答 2

4

Theres a really good reason that Chrome doesn't let the cursor blink in a read only text box and that is because a blinking cursor indicates that a user can type in that control.

So first up its worth deciding from a UX point of view if you want to go against that principle!

If you really really do, you could fake a read only behaviour by using a custom data- attribute to specify that you want the input to be read only and then just ignore any non-navigational keypresses.

var allowedKeys = {
    "37" : "arrow-left",
    "38" : "arrow-up",    
    "39" : "arrow-right",    
    "40" : "arrow-down",
    "9" : "tab",    
    "27" : "esc"        
}

$("input[data-readonly=readonly]").keydown(function(e){
    console.log(e.which);
    if (!allowedKeys[e.which]) {
        e.preventDefault();
    }
});

You can take a look at the fiddle here. http://jsfiddle.net/BUcC2/1/

If your intention is for this to be a normal input control that should behave in a standard way, I would recommend not using this method and stick with the browser's interpretation of the best way to display html :)

于 2013-09-25T13:10:53.470 回答
1

It's not possible with Google chrome, as you can't set the cursor to move in an input field when it is Read-Only, but in IE and firefox it is possible.

于 2013-09-25T13:11:56.797 回答