javascript - 如何使用 Javascript 使文本框只读

Question

我得到了一个在 asp 中创建的旧项目，我需要将其中一个文本框设置为只读(因为它由一个下拉框填充并且不应允许任何自由文本条目)。这将被剪切和干燥以设置 ReadOnly = "True"的属性。 . .except 在 keppress 上似乎有某种 js 函数阻止了只读属性的工作。我在 JS 方面的经验和知识很少，所以我不知道如何解决 - 什么应该是一个简单的改变。

我尝试在 html 中将 ReadOnly 属性添加到 True，但发生了一些奇怪的事情。当用户在框中键入时，文本会出现在框中，但他们无法将其删除。所以，这告诉我它部分有效，但还有其他事情正在发生。

然后我查看了实际页面 View (在浏览器中)的源代码，这就是我看到 kepress 事件被触发的地方。 . (onkeypress="return TheControl.RY(this, event);")。因为那没有显示在我的 ascx 文件中。

简而言之。 . ReadOnly 属性失败，因为某些 onkeypress 正在触发。 . . (a) 我不完全理解 JS 在做什么，或者如何使框只读。

这是 .ascx 文件中文本框的代码

 <span class="ComposeHeaderValue">
                <asp:TextBox runat="server"     ID="ToTextBox" TabIndex="1" ReadOnly="true" />
            </span>

但是当我从浏览器查看源代码时，这是 html:

 <span class="ComposeHeaderValue">
                <input name="TheControl$ToTextBox" type="text" readonly="readonly" id="TheControl_ToTextBox" tabindex="1" onkeypress="return TheControl.RY(this, event);" />
            </span>

我没有任何 JS 经验，但看起来它正在调用事件 (RY) onkeypress 。 .所以我在其中一个 js 文件中找到了一个叫做 RY 的东西，这就是它的内容

  RY: function Rockliffe_MailSite_Web_UI_Client_ComposeControl_ComposeControl$RY(lV, nd) {
    this.lR('ComposeControl', 'RY', lV.id + ',' + nd);
    if (!this.na) {
        return true;
    }
    return this.pg.Cu(lV, nd);


 },

而且我不知道这段代码中发生了什么。我试图在 JS RY 中添加属性更改。 . .但这没有用。这是我尝试过的:

    RY: function  Rockliffe_MailSite_Web_UI_Client_ComposeControl_ComposeControl$RY(lV, nd) {
    this.lR('ComposeControl', 'RY', lV.id + ',' + nd);
    if (!this.na) {
        return true;
    }
    return this.pg.Cu(lV, nd);

    document.getElementById('ToTextBox').readOnly = true;
 },

如果我找不到将文本框设置为 ReadOnly 的方法。 .由于按键事件，如何禁用按键事件的发生？理论上，如果文本框是只读的，就永远不会有按键事件？？

---

使用 Archer 提供的解决方案。 . . .这是我更新后的代码，但仍然无法正常工作

        <div class="ComposeHeaderLine">
            <WebUtils:IconButton runat="server" id="ToComposeButton" style="float:left"/>
            <span class="ComposeHeaderValue">
                <asp:TextBox runat="server" ID="ToTextBox" TabIndex="1" ReadOnly ="true" />
            </span>
        </div>

在页面的最底部，我添加了以下内容

<script type="text/javascript">

function onKeyPress(textbox, event) {
textbox.value += event.key;
}

document.getElementById("ToTextBox").removeAttribute("onkeypress");
</script>

不确定我是否正确配置了 JS？？？？

---

新编辑

好的，所以。 . .在我的 asp 代码中，文本框没有任何 onkeypress 事件。但是，当我在网络浏览器上查看源代码时，它确实显示了一个 onkeypress 事件。 . .我想知道这是否有问题。

"return TheControl.RY(this, event);"

<input name="TheControl$ToTextBox" type="text" readonly="readonly"   id="TheControl_ToTextBox" tabindex="1" onkeypress="return TheControl.RY(this,  event);" />

我有两个问题。使用 Archer 提供的示例。 . .

1. 他的函数名称是 onKeyPress。那么，我是否应该将我的函数重命名为“return TheControl.RY(this, event);” ？？？

2. getElement 代码行应该在括号内还是之后？ Archer 在 之后显示它。 ..但我不明白为什么它不在括号内？

Answer 1

如果您不能删除或退格，那么这听起来像是按键处理程序正在更新值，但忽略了 readonly 属性。如果只读属性存在，我不希望光标闪烁，但我不知道第 3 方代码在做什么。

但是，您可以删除可能会或可能不会与某些第 3 方代码冲突的按键处理程序。这是最简单可行的解决方案，不涉及拆解别人的库。

这是一个包含 2 个文本框的示例，我已经使用 Javascript 从其中一个中删除了按键处理程序。

function onKeyPress(textbox, event) {
  textbox.value += event.key;
}

// remove the event handler from textbox2
document.getElementById("textbox2").removeAttribute("onkeypress");

<input id="textbox1" type="text" readonly="readonly" onkeypress="onKeyPress(this, event)" placeholder="You can type in me" />
<br /><br />
<input id="textbox2" type="text" readonly="readonly" onkeypress="onKeyPress(this, event)" placeholder="You can't type in me" />

您只需要将一行 Javascript 添加到您的页面(并修改 ID 以适应)。

唯一需要注意的是，删除按键事件处理程序的代码行必须发生在第 3 方代码添加处理程序之后。理想情况下，只需将其粘贴在正文最底部的脚本标签中即可。