1.模拟Button的点击事件

<html>
    <  language=\" \">
    function clickFirstButton()
    {
      document.myForm.button1.click();
    }
    </ >
    <form name=\"myForm\">
      <input type=\"button\"
             value=\"Display alert box\"
             name=\"button1\"
              =\"console.log(\'You clicked the first button.\')\"><br>
      <input type=\"button\"
             value=\"Call on button 1\"
             name=\"button2\"
              =\"clickFirstButton()\">
    </form>    
</html>

 

2.为button按钮添加焦点

<html>
    <head>
        <  language=\" \">
    function removeFocus()
    {
      document.myForm.button2.blur();
    }
    </ >
    </head>
    <body>
    <form name=\"myForm\">
      <input type=\"button\"
             value=\"I hold my focus after a click\"
             name=\"button1\"><br>
      <input type=\"button\"
             value=\"I can not hold my focus after a click\"
             name=\"button2\"
              =\"removeFocus()\">
    </form>
    </body>
</html>

 

3.更改button按钮的文本值

<!DOCTYPE html>
<html>
<head>
<  type=\'text/ \'
  src=\'/js/lib/mootools-core-1.4.5-nocompat.js\'></ >
<style type=\'text/css\'>
button {
  width: 6em
}

button:hover span {
  display: none
}

button:hover:before {
  content: \"Reply!\"
}
</style>

</head>
<body>
  <button>
    <span>3 replies</span>
  </button>
</body>
</html>

 

4.buuton按钮的 事件实例

<html>
    <form name=\"myForm\">
      <input type=\"button\"
             value=\"Big Button\"
             name=\"myButton\"
              =\"console.log(\'MouseUp event occured\')\">
    </form>
</html>

 

5.获得Button NAME属性 

<html>
    <form name=\"myForm\">
      <input type=\"button\"
             value=\"Press here to see the name of this button\"
             name=\"myBigButton\"
              =\"displayButtonName()\">
      <input type=\"text\"
             name=\"textBox\">
    </form>
    <  language=\" \">
    function displayButtonName()<
    {
      document.myForm.textBox.value=document.myForm.myBigButton.name;
    }
    </ >
</html>

 

6.禁用和启用button按钮

<html>
<body>
< >
    function function1() {
        document.all.myButton.disabled = true;
    }
    function function2() {
        document.all.myButton.disabled = false;
    }
</ >
<input id=\"myButton\" type=\"button\" value=\"Disable\"  =\"function1();\">
<input type=\"button\" value=\"Enable\"  =\"function2();\">
</body>
</html>

 

7.获取buuton所在的form表单

<html>
<body>
    <form name=\"myForm\">
      <input type=\"button\"
             value=\"Big Button\"
             name=\"myButton\">
    </form>
    <  language=\" \">
    if(document.myForm.myButton.form == document.myForm)
      console.log(\"myButton\'s form property is equal to myForm  \");     
    else
      console.log(\"myButton\'s form property is NOT equal to myForm  \"); 
    </ >
</body>
</html>

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月15日 星期五

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章