Question

如何在ASP.NET中运行多个JavaScript函数以在TextBox中插入所需文本，设置TextBox背面颜色和字体颜色，还禁用或锁定按钮5秒钟？我试过下面的代码，但我需要客户端代码：

VB.NET代码：

Protected Sub btnClickTest_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnClickTest.Click
    txtTest.BackColor = Drawing.Color.Yellow
    txtTest.ForeColor = Drawing.Color.Red
    txtTest.Text = "You Clicked the Button!"
    btnClickTest.Enabled = False
    System.Threading.Thread.Sleep(5000)
    btnClickTest.Enabled = True
End Sub

HTML：

<html>
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server"> 
<div>
    <asp:Button ID="btnClickTest" 
        runat="server" 
        Text="Click Me" />        
<br />  <br />
</div>  
<asp:TextBox ID="txtTest" 
    runat="server"></asp:TextBox>  
</form>
</body>
</html>

Answer 1

解决方案：

HTML：

<html >
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server"> 
<div>
    <asp:Button ID="btnClickTest" 
        runat="server" 
        Text="Click Me" 
          onclientclick="desiredFunction(); lockoutSubmit(this); return false;" />        
<br /> <br />
</div>  
<asp:TextBox ID="txtTest" 
    runat="server"></asp:TextBox>   
</form>
</body>
</html>

的javascript：

  <script type="text/javascript">
  function desiredFunction() {
      var TextBox = document.getElementById("txtTest");

      //  1- Is used to insert desired text in the TextBox:
      TextBox.value = "You Clicked the Button!";

      //  2- Is used to set your TextBox back color to yellow:
      TextBox.style.backgroundColor = "yellow";

      //  3- Is used to set your TextBox font color to red:
      TextBox.style.color = "red";
  }

  //  4- Use this function to disable or lock your button for 5 seconds:
  function lockoutSubmit(button) {
      button.style.color = "blue";
      var oldValue = button.value;
      var i = 5; //variable for to count the seconds
      var interval = setInterval(function () {
          button.setAttribute('disabled', true);
          i -= 1;
          button.value = 'Wait ' + i + ' Seconds!';
      }, 1000)



      setTimeout(function () {
          clearInterval(interval); //drop the interval
          button.value = oldValue;
          button.removeAttribute('disabled');
          button.style.color = "black";
      }, 5000)
    }
 </script>

或者只是在html模式下（不是ASP.NET）

function desiredFunction() {
          var TextBox = document.getElementById("txtTest");

          //  1- Is used to insert desired text in the TextBox:
          TextBox.value = "You Clicked the Button!";

          //  2- Is used to set your TextBox back color to yellow:
          TextBox.style.backgroundColor = "yellow";

          //  3- Is used to set your TextBox font color to red:
          TextBox.style.color = "red";
      }



      //  4- Use this function to disable or lock your button for 5 seconds:
      function lockoutSubmit(button) {
          button.style.color = "blue";
          var oldValue = button.value;
          var i = 5; //variable for to count the seconds
          var interval = setInterval(function () {
              button.setAttribute('disabled', true);
              i -= 1;
              button.value = 'Wait ' + i + ' Seconds!';
          }, 1000)

          setTimeout(function () {
              clearInterval(interval); //drop the interval
              button.value = oldValue;
              button.removeAttribute('disabled');
              button.style.color = "black";
          }, 5000)
      }

<html>
<head>
    <title>JavaScript</title>
</head>
<body>
    <div>
        <input
            id="btnClickTest"
            type="button"
            value="Click Me" onclick="desiredFunction(); lockoutSubmit(this);" />       
        <br /> <br/>
    </div>
    <input
        id="txtTest"
        type="text" />
 </body>
</html>

如何使用Button的OnClientClick属性在ASP.NET中运行多个JavaScript函数？

1 个答案: