输入集中，但不可键入

Input focused but not typable

本文关键字：集中 输入      更新时间：2023-09-26

我有一个<input readonly="true">元素。我将其设置为删除只读属性并在双击时聚焦元素。我可以看到只读属性被删除，光标在文本字段中闪烁。但是，当我打字时，没有任何反应。如果我再次双击（单击不执行任何操作），我可以键入。这是为什么呢？

https://jsfiddle.net/kkj1wtef/

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

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

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

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

刚刚在您提到的每个浏览器中进行了测试，并且可以与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();
});

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

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

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

希望这会有所帮助。

在Chrome 48的小提琴中，它总是忽略我输入的第一个字符，但接下来的所有字符都有效。我能够通过在您聚焦输入后添加一行来修复它。

设置input.value = ''

这为我解决了问题。

相关文章：