输入只读退格键问题

Question

在我的input元素中，当我将输入设置为readonly时，当我导航到该元素并使用键盘输入退格键时，它会导航到上一页。

我的代码如下。请分享你的知识。

<div class="div1">
    <label class="div1" for="inputfor">cash:</label>
    <input type="text" id="cashinput" readonly="readonly" />
</div>

Answer 1

对于具有readonly属性的输入，这是预期的且正确的行为。

具有此属性的输入不能修改，只能查看，您可以通过Tab键和复制访问内容，但仅此而已。

如果不需要只读属性，则将其删除。

Answer 2

我知道这个问题是两年前提出的。既然我有一个对我有效的解决方案，我很想和每个人分享它。

修复方法非常简单：

<input type="text" onkeydown="event.preventDefault()" readonly="readonly"/>

event.preventDefault()将阻止退格键离开页面，您还可以选择和复制文本。

谢谢。

Answer 3

您可以始终只将输入字段保持为只读，而不允许输入。

<div class="div1">
    <label class="div1" for="inputfor">cash:</label>
    <input type="text" id="cashinput" onkeydown="return false;" readonly="readonly"/>
</div>​​​​​​​​​​​​​​​