onsearch 事件
当提交搜索时执行 JavaScript:
<p>在搜索文本域中输入信息并按下 "ENTER" 键。</p> <input type="search" id="myInput" onsearch="myFunction()"> <p><strong>注意:</strong>Internet Explorer, Firefox 或 Opera 12 及其更早版本不支持 onsearch 事件。</p> <p id="demo"></p> <script> function myFunction() { var x = document.getElementById("myInput"); document.getElementById("demo").innerHTML = "您搜索的内容为:" + x.value; } </script>
定义和用法
onsearch 事件在用户按下"ENTER(回车)" 按键或点击 type="search" 的 <input> 元素的 "x(搜索)" 按钮时触发。
浏览器支持
表格中的数字表示支持该事件的第一个浏览器的版本号。
事件 | |||||
---|---|---|---|---|---|
onsearch | Yes | 不支持 | 不支持 | Yes | 15.0 |
语法
HTML 中:
<element onsearch="myScript">
<p>该实例演示了如何向 input 元素添加 "onsearch" 事件。</p> <p>在搜索文本域中输入信息并按下 "ENTER" 键。</p> <input type="search" id="myInput" onsearch="myFunction()"> <p><strong>注意:</strong>Internet Explorer, Firefox 或 Opera 12 及其更早版本不支持 onsearch 事件。</p> <p id="demo"></p> <script> function myFunction() { var x = document.getElementById("myInput"); document.getElementById("demo").innerHTML = "您搜索的内容为:" + x.value; } </script>
JavaScript 中:
object.onsearch = function() { myScript };
<p>该实例演示了如何使用 HTML DOM 向 input 元素添加 "onsearch" 事件。</p> <p>在搜索文本域中输入信息并按下 "ENTER" 键。</p> <input type="search" id="myInput"> <p><strong>注意:</strong>Internet Explorer, Firefox 或 Opera 12 及其更早版本不支持 onsearch 事件。</p> <p id="demo"></p> <script> document.getElementById("myInput").onsearch = function() { myFunction() }; function myFunction() { var x = document.getElementById("myInput"); document.getElementById("demo").innerHTML = "您搜索的内容为:" + x.value; } </script>
JavaScript 中, 使用 addEventListener() 方法:
object.addEventListener("search", myScript);
<p>该实例演示了如何使用 addEventListener() 方法向 input 元素添加 "onsearch" 事件。</p> <p>在搜索文本域中输入信息并按下 "ENTER" 键。</p> <input type="search" id="myInput"> <p><strong>注意:</strong>Internet Explorer, Firefox 或 Opera 12 及其更早版本不支持 onsearch 事件。</p> <p id="demo"></p> <script> document.getElementById("myInput").addEventListener("search", myFunction); function myFunction() { var x = document.getElementById("myInput"); document.getElementById("demo").innerHTML = "您搜索的内容为:" + x.value; } </script>
注意: Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。
技术细节
是否支持冒泡: | Yes |
---|---|
是否可以取消: | No |
事件类型: | Event |
支持的 HTML 标签: | <input type="search"> |