如何在asp.net和javascript中将文本框中键入的项显示到另一个文本框或div中？

我想将一个文本框的数据显示到另一个文本框中以供预览。数据需要在同一页面中可见，但在用户键入第一个文本框中的字符的同时，在另一个文本框或div中可见。以下是我正在尝试的，但它无法实现我的目标：

Asp.net：

<asp:TextBox ID="txtCustomWord" runat="server" Width="300px" ClientIDMode="Static" 
   placeholder="Enter your custom word (11 Characters)" MaxLength="11" 
   onkeyup="show(document.getElementById('txtCustomWord').value);"></asp:TextBox>

具体来说：（Javascript函数）

并从文本框本身删除onkeyup事件

这里有一个链接指向一个非常类似的问题。 我认为这会解决你的问题

我尝试使用不同的事件（onchange），但当您仍将焦点放在文本框时，这不适用

特别是：（Javascript函数）

并从文本框本身删除onkeyup事件

这里有一个链接指向一个非常类似的问题。 我认为这会解决你的问题

我尝试使用不同的事件（onchange），但当您仍将焦点放在文本框时，这不适用

---

您应该使用

asp:TextBox

的ClientID来访问它们在JavaScript中的值：

show（）

的方法签名如下所示： 让

成为我们想要显示内容的div

 function show() {
      var TextObject = document.getElementById('<%= txtCustomWord.ClientID %>');
      if(TextObject  != null)
      document.getElementById('DisplayDiv').innerHTML =TextObject.value; 
    }

函数显示（）{
var TextObject=document.getElementById（“”）；
if（TextObject！=null）
document.getElementById（'DisplayDiv'）。innerHTML=TextObject.value；
}

您应该使用

asp:TextBox

的ClientID来访问它们在JavaScript中的值：

show（）

的方法签名如下所示： 让

成为我们想要显示内容的div

 function show() {
      var TextObject = document.getElementById('<%= txtCustomWord.ClientID %>');
      if(TextObject  != null)
      document.getElementById('DisplayDiv').innerHTML =TextObject.value; 
    }

函数显示（）{
var TextObject=document.getElementById（“”）；
if（TextObject！=null）
document.getElementById（'DisplayDiv'）。innerHTML=TextObject.value；
}

既然您使用了jQuery标记，下面是一个解决方案

$('#txtCustomWord').keyup(function(){
    $('#txtDisplay').val($(this).val());
});

---

既然您使用了jQuery标记，下面是一个解决方案

$('#txtCustomWord').keyup(function(){
    $('#txtDisplay').val($(this).val());
});

---

传递东西

只需使用

this.value

传入当前元素的值，即可简化操作并避免传入对当前元素的完整引用：

onkeyup="show(this.value);">

然后根据元素的类型，您需要相应地设置值。如果是

，则需要使用属性设置值，否则，如果是

，则需要使用：

function show(text) {
    // Use innerHTML for <div> elements, use value for <input> elements
    document.getElementById('text').innerHTML = text;
}

功能显示（文本）{
//对元素使用innerHTML，对元素使用value
document.getElementById（'text'）。innerHTML=text；
}

示例

您可以在下面看到生成此代码所需的所有代码：

<form id="form1" runat="server">
    <asp:TextBox ID="txtCustomWord" runat="server" Width="300px" ClientIDMode="Static" placeholder="Enter your custom word (11 Characters)" MaxLength="11" onkeyup="show(this.value);"></asp:TextBox>
    <div id="text"></div>
</form>
<script>
    function show(text) {
        document.getElementById('text').innerHTML = text;
    }
</script>

下面是一个实际应用的例子：

传递东西

只需使用
this.value
传入当前元素的值，即可简化操作并避免传入对当前元素的完整引用：

onkeyup="show(this.value);">

然后根据元素的类型，您需要相应地设置值。如果是
，则需要使用属性设置值，否则，如果是
，则需要使用：

function show(text) {
    // Use innerHTML for <div> elements, use value for <input> elements
    document.getElementById('text').innerHTML = text;
}

功能显示（文本）{
//对元素使用innerHTML，对元素使用value
document.getElementById（'text'）。innerHTML=text；
}

示例

您可以在下面看到生成此代码所需的所有代码：

<form id="form1" runat="server">
    <asp:TextBox ID="txtCustomWord" runat="server" Width="300px" ClientIDMode="Static" placeholder="Enter your custom word (11 Characters)" MaxLength="11" onkeyup="show(this.value);"></asp:TextBox>
    <div id="text"></div>
</form>
<script>
    function show(text) {
        document.getElementById('text').innerHTML = text;
    }
</script>


下面是一个实际应用的例子：

在第一个文本框上执行按键事件在第一个文本框上执行按键事件