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

Question

我想将一个文本框的数据显示到另一个文本框中以进行预览。当用户在第一个文本框内键入字符时，数据需要在同一页面中但在另一个文本框或 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:

function show(text) {
    document.getElementById("text").innerHTML = text;
}

Answer 1

传递事物

只需使用 this.value从当前元素传递值以简化操作并避免必须传递对当前元素的完整引用:

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

然后根据元素的类型，您需要相应地设置值。如果是<div> ，您需要使用 innerHTML 属性来设置值，否则，您将需要使用 value 如果是<input> :

function show(text) {
    // Use innerHTML for <div> elements, use value for <input> elements
    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>

您可以see an interactive example of the rendered markup this generates here下面是一个实际的例子: