【Jquery实战】按下回车键触发事件

深碍√TFBOYSˉ_ 2022-07-15 11:29 243阅读 0赞

1、点击button按钮后弹出一个窗口，然后再弹出页面按下回车键将需要的值传入父页面，并关闭当前弹出层。js触发事件如下：

![Image 1][]

注：ul元素中的值是动态传入的。

<td><input type="checkbox" <c:if test="${supplierInfo.state!=1 }">disabled</c:if> sid="${supplierInfo.id}" οnclick="chkSupplier(this,'${supplierInfo.id}','${supplierInfo.nameFull}','${supplierInfo.supplierType}','${typeMap[supplierInfo.supplierType]}','${supplierInfo.provinceName}','${supplierInfo.cityName}','${supplierInfo.areaName}','${supplierInfo.townName}')" /></td>

function chkSupplier(obj,id,name,type,typename,province,city,area,town){ if($(obj).is(':checked')){ $(".w_table").find("input[type='checkbox'][sid!='"+id+"']").prop("checked", false); $("#ulSel").empty(); $("#ulSel").append("<li sid='"+id+"' sname='"+name+"' stype='"+type+"' stypename='"+typename+"' province='"+province+"' city='"+city+"' area='"+area+"' town='"+town+"'>" +name+"<span class='pop_check_del'></span></li>"); bindEvent(); } }

以上是获取table中被选中的行数据，并将值传入指定的div中。

![Center][]

![Image 1][]

代码如下：

document.onkeydown = function (e) { var theEvent = window.event || e; var code = theEvent.keyCode || theEvent.which; if (code == 13) { var sid = $("#ulSel li").attr("sid"); var sname = $("#ulSel li").attr("sname"); parent.document.getElementById("supplierId").value=sid; parent.document.getElementById("supplierName").value=sname; var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); } } </script>

还可以这样写：

//按回车键事件触发,jQuery给input绑定回车事件  
    $(function()\{  
        $('\#regist\_username').bind('keypress',function(event)\{  
            if(event.keyCode == "1")     
            \{  
                alert('你输入的内容为：' + $('\#regist\_username').val());  
            \}  
        \});  
    \});  
  
说明：  
  //按任意键触发  
    $("\#search\_note").keydown(function()\{  
       alert("---------");  
    \});  
  
  //按下回车键  
    $("\#search\_note").keydown(function(event)\{  
       var code = event.keyCode;//获取按键Code  
        if(code==13)\{//按下回车键  
            alert("---------");  
     \}  
   \});

[Image 1]: 
[Center]: /images/20220715/bda1cfe701f84311b6863b8eee7e958d.png