如何使 html 文本输入只读但能够使用脚本进行更新？

Posted 2023-04-13

【中文标题】如何使 html 文本输入只读但能够使用脚本进行更新？

【英文标题】：How do I make an html text input readonly but be able to update with a script?

【发布时间】：2021-10-05 09:49:20

【问题描述】：

当我单击一行时，我有这些输入从我的表中获取 a 的值。我想这样做，以便用户不能自己更改输入，但希望在用户单击表格行时将值带入其中。我将把这些输入作为一种形式传递。我知道当输入是这样的： 它不会被更新。有没有其他方法可以通过输入来做到这一点。我可以使用可以通过表单传递的不同类型的标签吗？

【参考方案1】：

而不是只读的<input>，我会使用显示元素和隐藏表单元素的组合。比如：

<div id="my-display">This is a value</div>
<input id="my-input" name="my-input" type="hidden" />

并且在代码中更新两者：

$('#my-display').text(yourValue);
$('#my-input').val(yourValue);

您可以根据自己的喜好为用户设置显示样式，而不必担心它是否会“停用”表单输入。

---

如果你真的希望它是一个非活动输入，你可以使用相同的方法：

<input class="my-input" type="text" disabled />
<input class="my-input" type="hidden" name="my-input" />

这甚至可以为您节省一行代码，因为现在两者都可以使用.val()：

$('.my-input').val(yourValue);

【讨论】：

您的第二个解决方案正是我想要的，谢谢！

【参考方案2】：

尝试禁用关键字here

<div id="my-display">This is a value</div>
<input id="my-input" name="my-input" type="text" disabled/>

您可以通过javascript更改值，如下所示：

document.querySelector('#my-input').value = 'the value you want to enter by javascript';