码迷,mamicode.com
首页 > Web开发 > 详细

Js实现回车响应事件案例

时间:2016-04-14 22:41:40      阅读:285      评论:0      收藏:0      [点我收藏+]

标签:form表单   回车响应   阻止默认行为   

本案例使用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();
 
                  }       
             
                
              
 })
 })


 

效果图:

  技术分享  

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

 技术分享

二.分析,这个实现<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)回车响应的实现(jsjquery)。

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

(3)表单中的回车响应:

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

          1)如果表单里只有一个type=submit的按钮,回车键生效;

          2)如果表单里只有一个type=textinput,不管按钮是什么type,回车键生效

          3radiocheckboxFX下也会触发提交表单,在IE下不会

          4typeimage的按钮,等同于typesubmit的效果


Js实现回车响应事件案例

标签:form表单   回车响应   阻止默认行为   

原文地址:http://xiyin001.blog.51cto.com/9831864/1763922

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!