代理加盟 2019全新代理計劃 賺錢+省錢雙管齊下,獨立平臺,豐厚利潤!

您現在的位置: cf阿拉维斯如何钻bug > 站長學院 > 建站教程 >

韦斯卡阿拉维斯:獲取input輸入值回車按鈕事件不提交表單

來源:未知 發布時間:2019-03-30熱度: ℃我要評論
網站開發中經?;嵊玫絞蟊昊蚣淌錄?,實現表單提交,獲取用戶輸入值等功能,由于瀏覽器的不同,對回車的默認功能不盡相同。 在form表單中,往往需要輸入多個input值,如果某個input值為空則不能提交表單(必填項),按下回車會自動提交表單,有些時候并不需要提交表單...

cf阿拉维斯如何钻bug www.rxtxrm.com.cn 織夢模板免費下載,無需注冊無需充值

       網站開發中經?;嵊玫絞蟊昊蚣淌錄?,實現表單提交,獲取用戶輸入值等功能,由于瀏覽器的不同,對回車的默認功能不盡相同。

       在form表單中,往往需要輸入多個input值,如果某個input值為空則不能提交表單(必填項),按下回車會自動提交表單,有些時候并不需要提交表單,只是驗證輸入值是否正確。

       做這些開發是為了提高用戶體驗,用戶習慣按TAB健進行input之間的切換,按回車提交表單。筆者也是慢慢摸索著不斷學習,經實戰總結出來。

onclick點擊獲取input值方法

JS部分

<script src="jquery.min.js" language="javascript" type="text/javascript"></script>//引用公共JS
<script type="text/javascript">
 var result,input
 function record(){
 result = document.getElementById("result").innerHTML;
 input = document.getElementById("email").value;//email輸入值
 document.getElementById("result").innerHTML=input;//獲取input值
}
</script>

HTML部分

<form>
 <input type="text" class="intxt" id="email" name="email" placeholder="輸入郵箱"/>
 <p><input type="button" id="zhucenext" class="loginBtn" onclick="record()" value="點擊獲取input值"/></p>
 <p id="result"></p><!--獲取的值在這里顯示-->
</form>

      直接點擊<input id="zhucenext"/>按鈕能自動獲取里面值,但是有時候我們會習慣用回車,請繼續看如何實現增加鍵盤的回車鍵功能。

回車激活按鈕事件獲取input值

       這里需要注意的是,一般input放在某個表單form表單內,在某些瀏覽器內,直接回車會自動提交表單。比如增加驗證碼之后,回車不執行提交表單。

       回車鍵的鍵值是13,回車事件通用代碼如下:

<input type="text" id="" name="" onkeypress="
if(event.keyCode==13){
zhucenext();//執行id為zhucenext的click事件,多個事件之間用英文的";"隔開
return false;//不執行表單提交
}"/>

點擊事件和回車事件完整的應用實例

<!doctype html>
<html>
<head>
<script src="jquery.min.js" language="javascript" type="text/javascript"></script>//引用公共JS
<script type="text/javascript">
 function record(){
 var input=document.getElementById("email").value;//通過id獲取需要驗證的(input)表單元素的值
 if(input==""){//如果獲取的值為空
  alert("請輸入郵箱名");//彈出提示
 return false;//返回false
 }
 var input2=document.getElementById("vdcode").value;//第二個需要驗證的(input2)元素值,以此類推
 if(input2==""){
  alert("請輸入驗證碼");
  return false;
 }
 //判斷為空值返回,不為空繼續執行下面
 var result=document.getElementById("result").innerHTML;
 document.getElementById("result").innerHTML=input;//設置只獲取input(郵箱)的值
 //執行其他命令直接寫
 menuShow('zhuceboxnonne');
}
</script>
</head>
<body>
<form method="post" action="new.php" name="form">
 <input type="text" class="intxt" id="email" name="email" placeholder="輸入郵箱" onkeypress="if(event.keyCode==13){record();return false;}"/></p><!--驗證郵箱是否為空,是否通過回車都不提交表單-->
 <input type="text" class="intxt" id="vdcode" name="vdcode" placeholder="驗證碼" onkeypress="if(event.keyCode==13){record();return false;}"/><!--驗證驗證碼是否為空,通過后回車執行表單提交,否則返回-->
 <img id="vdimgck" onclick="this.src=this.src+'?'" alt="看不清?點擊更換" src="../include/vdimgck.php"/>
 <button type="submit" id="login" class="loginBtn" onclick="record()">提交表單</button></p><!--點擊button提交表單,不能return false,否則無法提交表單-->
</form>
<p id="result"></p><!--獲取的結果-->
</body>
</html>

       這樣就能實現一個回車執行多個input按鈕事件,多個onkeypress需要用“;”隔開。

本文地址://www.rxtxrm.com.cn/news/1429.html

    發表評論

    評論列表(條)