Блог

Я хочу скопировать значение из textbox1 в textbox2 при выводе табуляции из textbox1 с помощью jquery. Для свойства TextBox2 visible установлено значение false.

После копирования значения из textbox1 в textbox2 я хочу изменить первые пять чисел textbox1 на XXXXX. Чтобы добиться этого, я написал следующий код. Код работает, когда видны оба текстовых поля, в противном случае работает только замена первых 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 невидимым. Как я могу исправить эту проблему.

любая помощь будет принята с благодарностью.

Удалите свойство видимости первого текстового поля из 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>  

Вместо использования visible:false вы просто используете display:none свойство, которое работает так же.

Почему это происходит: когда для элемента (элемента) установлено значение visible: false in ASP.net , это означает, что он вообще не отображается сбоку client . Так что технически оно вообще не существует в DOM.

Решение: просто установите CSS для вашего TextBox2 display: none значения значение и удалите visible:false из <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

Рабочая демонстрация:

 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>