输入数据后将表单输入字段转换为只读

Question

我正在尝试找出是否可以使用以下逻辑更新以下代码：
输入文本后，将字段设为只读。
基本上，它是一个签名字段，我们希望一旦有人输入值就被锁定。

<strong>Logistics Chief:</strong></span></td>
            <td><span style="font-size: 10pt; font-family: Arial;"><input type="text" style="width: 200px; height: 22px;" value="" fieldname="Field_31"><br>

Answer 1

这可以通过一些普通的 JavaScript 来完成。这里有 2 个函数用于锁定和解锁输入字段。使用输入的 HTML 属性 onfocusout="" 我们访问事件以使字段不聚焦，也就是离开字段的编辑模式。然后我添加了一个按钮以再次解锁它，因为如果他/她设法将 type-o 放在那里并且没有其他方法可以修复它，用户会非常恼火。

HTML：

<td>
    <span style="font-size: 10pt; font-family: Arial;">
        <input id="signature_input" onfocusout="lock_signature_field()" type="text" style="width: 200px; height: 22px;" fieldname="Field_31">
        <br><br>
    </span>
</td>
<td>
    <button type="button" name="button" onclick="unlock_signature_field()">Edit Signature</button>
</td>

这里还是同样的 HTML，更简洁，更易于复制粘贴：

<td>
    <span>
        <input id="signature_input" onfocusout="lock_signature_field()" type="text"fieldname="name">
        <br><br>
    </span>
</td>
<td>
    <button type="button" name="button" onclick="unlock_signature_field()">Edit Signature</button>
</td>

JS（放在页面底部的前面）：

<script type="text/javascript">

    // set reference to the dom input field
    const signatureField = document.getElementById("signature_input");

    function lock_signature_field() {
        signatureField.setAttribute('readonly', true);
        console.log('Element was locked.'); // you can remove this debug-line if you want.
    }

    function unlock_signature_field() {
        signatureField.removeAttribute("readonly"); // we have to remove the attribute alltogether, cause setting it to false, will do nothing in most browsers.
        console.log('Element was unlocked.'); // you can remove this debug-line if you want.
    }

</script>

这里是jsfiddle！