Question

我有一个<input readonly="true">元素。我设置为删除readonly属性并在双击时聚焦元素。我可以看到readonly属性被删除，光标在文本字段中闪烁。但是，当我输入时，没有任何反应。如果我再次双击（单击没有做任何事情），我可以输入。这是为什么？

https://jsfiddle.net/kkj1wtef/

我在Chrome中遇到过这种情况。奇怪的是，在Firefox中，readonly属性似乎根本不起作用。

Answer 1

无论出于何种原因，这似乎解决了这个问题：

input.addEventListener('dblclick', function() {
    input.removeAttribute('readonly');
    input.blur();
    input.focus();
});

https://jsfiddle.net/kkj1wtef/2/

Answer 2

您可以简化javascript代码段并重命名var以避免歧义：

var txtbox = document.querySelector('input');
txtbox.addEventListener('dblclick', function() {
    this.removeAttribute('readonly');
});

无需额外设置焦点，因为双击就足够了。

希望这会有所帮助。

Answer 3

刚刚在您提到的每个浏览器中进行过测试，并且它可以正常使用jQuery

HTML

<input type="text" readonly="true">

JS

var $input = $('input');

$input.dblclick(function() {
    $input.removeAttr('readonly');
    $input.focus();
});

或添加this，以防其他人无效

$input.dblclick(function() {
    $(this).removeAttr('readonly');
    $(this).focus();
});

Answer 4

在Chrome 48的小提琴中，它总是忽略我输入的第一个字符，但后面的所有内容都有效。我可以通过在您关注输入后添加一行来修复它。

设置class Role(db.Model, RoleMixin): __tablename__ = 'roles' id = db.Column(db.Integer, primary_key=True) name = db.Column(db.Unicode(length=64), unique=True) description = db.Column(db.Unicode(length=255), nullable=True) def __unicode__(self): return u"{name} ({role})".format(name=self.name, role=self.description or 'Role') user_to_role = db.Table('user_to_role', db.Column('user_id', db.Integer(), db.ForeignKey('users.id')), db.Column('role_id', db.Integer(), db.ForeignKey('roles.id'))) class User(db.Model, UserMixin): __tablename__ = 'users' id = db.Column(db.Integer, primary_key=True) first_name = db.Column(db.Unicode(length=255), nullable=False) last_name = db.Column(db.Unicode(length=255), nullable=False) email = db.Column(db.Unicode(length=254), unique=True, nullable=True) password = db.Column(db.Unicode(length=255), nullable=False) active = db.Column(db.Boolean(), default=False) roles = db.relationship('Role', secondary=user_to_role, backref=db.backref('users', lazy='select')) def __unicode__(self): return u"{first_name} ({last_name})".format(first_name=self.first_name, last_name=self.last_name)

这解决了我的问题。

输入集中但不可打字

4 个答案: