如果Visible属性设置为false，则将一个文本框的值复制到另一个文本盒将不起作用

Question

当我使用jquery从textbox1制表时，我想将textbox1上的值复制到textbox2。TextBox2可见属性设置为false。

将值从textbox1复制到textbox2后，我想将textbox1的前五个数字更改为XXXXX。为了实现这一点，我编写了以下代码。当两个文本框2都可见时，代码就会工作，否则只有将前5个数字更改为X才能工作，并且复制到另一个文本框也会停止工作。

前端代码：

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>



<asp:TextBox ID="TextBox1" runat="server" onchange="mychange();" ></asp:TextBox>

<asp:TextBox ID="TextBox2" runat="server" Visible="false" ></asp:TextBox>
<asp:Button ID="btnTest" runat="server" Text="Test" OnClick="btnTest_Click" />
</div>
</form>

JQuery代码：

<script>
function mychange() {

var name = $("#<%=TextBox1.ClientID%>").val(); 
$("#<%=TextBox2.ClientID%>").val(name); 
var txt1 = $('#TextBox1');
s = txt1.val();
if (s.length > 5) {
s = "XXXXX" + s.substring(s.length - 4, s.length);
txt1.val(s);
}
}
</script>

如果我使TextBox2不可见，我不知道为什么将前五个数字复制到另一个文本框会停止工作。如何解决此问题。

任何帮助都将不胜感激。

Answer 1

从HTML中删除第一个文本框的可见性属性，并在JS代码中添加如下所示的功能，以处理隐藏JS中的元素。

< script >
window.addEventListener('load',()=>{

document.querySelector("#<%=TextBox1.ClientID%>").style.display = "none";

});
function mychange() {

var name = $("#<%=TextBox1.ClientID%>").val();

$("#<%=TextBox2.ClientID%>").val(name);
var txt1 = $('#TextBox1');
s = txt1.val();
if (s.length > 5) {
s = "XXXXX" + s.substring(s.length - 4, s.length);
txt1.val(s);
}
} <
/script>

Answer 2

不使用visible:false，只需使用display:none属性，它们的工作方式相同。

发生这种情况的原因：当一个项(元素(在ASP.net中设置为可见：false时，这意味着它的在client侧根本没有被渲染。因此，从技术上讲，它根本不存在于DOM中。

解决方案：只需将TextBox2的CSS设置为display: none，然后从<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>中删除visible:false

工作演示：

function mychange() {
var name = $("#TextBox1").val();
$("#TextBox2").val(name);
var txt1 = $('#TextBox1');
var s = txt1.val();
if (s.length > 5) {
s = "XXXXX" + s.substring(s.length - 4, s.length);
txt1.val(s);
}
console.log('Hidden Input value: ' + $("#TextBox2").val()) //display the value
}

#TextBox2 {
display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<input type="text" ID="TextBox1" runat="server" onchange="mychange();" placeholder="Type something > 5" />
<input type="text" ID="TextBox2" runat="server"/>
<Button ID="btnTest" runat="server" Text="Test" OnClick="btnTest_Click">
Test
</Button>
</div>
</form>