Question

我得到了一个在ASP中创建的旧项目，我需要将其中一个文本框设置为只读（因为它由下拉框填充，并且不应允许任何自由文本输入）。这将被剪切并干燥以设置ReadOnly =“ True”的属性。。 .except在keppress上似乎有某种js函数阻止了readonly属性的工作。我在JS方面的经验和知识很少，因此我对如何解决问题一无所知-这应该是一个容易的更改。

我尝试在html内将ReadOnly属性添加到True，但是发生了一些奇怪的事情。当用户在框中键入内容时，文本将出现在框中，但他们不能将其删除。因此，这告诉我它正在部分工作，但是还有其他事情在发生。

然后，我从实际的页面视图（在浏览器中）查看了源代码，在那里我看到了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的任何经验，但是看起来它在调用keykey上的事件（RY）。。所以我在其中一个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的方法。。由于keypress事件，如何禁用keypress事件？从理论上讲，如果文本框为只读，则永远不会有按键事件？

使用解决方案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事件。但是，当我在Web浏览器上查看源代码时，它确实显示了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。。

其功能的名称为onKeyPress。因此，我应该将函数重命名为“ return TheControl.RY（this，event）;”。 ???
getElement代码行应该放在方括号内还是之后？阿切尔之后展示它。 ..但我不明白为什么它不在括号内？

Answer 1

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

但是，您可以删除可能与某些第三方代码冲突的按键处理程序。这是最简单的可行解决方案，不涉及拆解其他人的图书馆。

这是一个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以适合）。

唯一的警告是，删除按键事件处理程序的代码行必须在第三方代码添加处理程序之后进行。理想情况下，只需将其粘贴在身体底部的脚本标签中即可。

如何使用Javascript使TextBox只读

1 个答案: