Js实现回车响应事件案例

发布时间：2020-06-24 06:31:41 作者：蜗牛oscersong
来源：网络阅读：2349

本案例使用js方式及jquery实现页面中的搜索框，按回车键与按按钮响应达到相同的效果。

 <body>
<input id="sousuo" type="text" placeholder="搜你想要的">  
<input type="button" id="sub" value="搜索">
<div id="ti"></div>
</body>
原生js实现：
window.onload=function(){
  var sousuoobj=document.getElementById('sousuo');
      var tiobj=document.getElementById("ti");
      var subobj=document.getElementById('sub');
     //点击按钮响应的函数操作，复习了以前的几个函数。
      function search(){
      var value=sousuoobj.value;
          if(value){
          var para=document.createElement("p");
          var text=document.createTextNode("搜索的内容为"+value);
          tiobj.appendChild(para.appendChild(text));
          
          }
           
        }
      subobj.addEventListener("click",search,false);
       sousuoobj.addEventListener("keyup",function(event){
         var event = event || window.event;          
           if(event.keyCode==13){
           search();
           }
         
       });
 
}
Jquery实现：
    $(function(){
   function search(){
   var value=$('#sousuo').val();
         if(value){
         $('#ti').append("<p>搜索的内容为："+value+"</p> ");
          
         }    
          
           
        };
    $("#sub").on("click",search);
 $("#sousuo").on("keyup",function(event){
             var event=event||window.enent;             
                  if(event.keyCode==13){
                     search();
 
                  }       
             
                
              
 })
 })

效果图：

Js实现回车响应事件案例

填入搜索内容，比如：51cto,按回车键，或者搜索按钮弹出：

Js实现回车响应事件案例

二．分析，这个实现<input>不要有父元素<form>,因为，表单会有默认行为；

例如：

 <form action="jshuanfu.html" id="form1" method=”post”>  
<input id="sousuo" type="text" placeholder="搜你想要的">  
 <input type="button" id="sub" value="搜索">
   <div id="ti"></div>
 </form>

这种情况点击按钮，或者回车响应，都直接跳转到了jshuanfu.html这个页面，这就是表单的默认行为。

要使用必要的代码阻止默认行为，return false;是能够阻止表单提交的。

表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。表单使用表单标签（<form>）定义。

例如：

 <form action="jshuanfu.html" id="form1" onsubmit="return check()">  
<input id="sousuo" type="text" placeholder="搜你想要的">  
 <input type="button" id="sub" value="搜索">
   <div id="ti"></div>
 </form>  
Js处理：
        var form1=document.getElementById("form1");
    var sousuoobj=document.getElementById('sousuo');
    var tiobj=document.getElementById("ti");
    var subobj=document.getElementById('sub');
     function search(){
      var val=sousuoobj.value;     
              if(val){
          var para=document.createElement("p");
          var text=document.createTextNode("搜索的内容为"+val);
          tiobj.appendChild(para.appendChild(text));
          return false;
          }
          
     }
 function check(){   
     if(search()){alert("hahha");return true;}
      else{
      return false;
      }
  }
     也可以使用，event.preventDefaule()或window.event.returnValue=false的方式阻止表单的提交。
例如：
        var form1=document.getElementById("form1");
    var sousuoobj=document.getElementById('sousuo');
    var tiobj=document.getElementById("ti");
    var subobj=document.getElementById('sub');
       form1.onsubmit=function(event){
     var event = event || window.event;     
    var val=sousuoobj.value;
        if(val){
          var para=document.createElement("p");
          var text=document.createTextNode("搜索的内容为"+val);
          tiobj.appendChild(para.appendChild(text));
               
                if (event.preventDefault) {
                 event.preventDefault(); 
               } 
              else {
               event.returnValue = false;  
             }
             }   
             }

实现效果图：与上面图一样：

总结：在这几个例子的学习中，学到了：

（1）回车响应的实现（js与jquery）。

（2）阻止表单的默认行为。使用return false;或者通过event.preventDefaule()或window.event.returnValue=false的方式阻止表单的提交。

（3）表单中的回车响应：

表单中的回车响应是浏览器实现的：

1）如果表单里只有一个type=”submit”的按钮，回车键生效；

2）如果表单里只有一个type=”text”的input,不管按钮是什么type,回车键生效

3）radio和checkbox在FX下也会触发提交表单，在IE下不会

4）type为p_w_picpath的按钮，等同于type为submit的效果

(4)完整的表单案例，请查看下篇文章http://xiyin001.blog.51cto.com/9831864/1764012，<js实现注册页面>。

Js实现回车响应事件案例

相关阅读