如何防止在輸入字段中按Enter鍵時發生重定向？

我有一個帶有電子郵件輸入的表單。如何防止在輸入字段中按Enter鍵時發生重定向？

<form action="." method="post"> 
    <div id="email-wrapper"> 
     <input type="text" placeholder="Your email" name="email" ref="email" onChange={this.handleChange}/> 
    </div> 
    <span class="signup-error">Please provide a valid email.</span> 
</form> 
.... 
.... 
<button id="next-btn" onClick={this.saveAndContinue}>Next</button>

當按鈕被按下時，我用簡單的正則表達式驗證，確認它的電子郵件地址，這工作正常。不過，如果我按enter鍵（key=13），它引導到一些其它頁面，這是我看到的錯誤：

無法發佈/

我想這個腳本會處理這個問題，但它沒't：

handleChange = (event) => { 
    event.preventDefault(); 
    var keyCode = event.keyCode || event.which; 
    if (keyCode == '13'){ 
     console.log('enter pressed'); 
    } 
}

發生了什麼事？如何防止在輸入字段中按Enter鍵時發生重定向？你可以幫我嗎。謝謝。

來源

2016-07-25 Karl

您是否嘗試過處理'onKeyPress'事件？另外，當按Enter鍵時嘗試返回'false'。你需要在事件連接中返回'handleChange'（類似於''） –

@joe_coolish'onKeyPress'實際上有助於防止重定向。謝謝。 – Karl

好聽！如果您覺得它應該有複選標記，我將我的建議作爲答案加入 –

嘗試處理onKeyPress事件。當您在handleChange功能中按下Enter鍵時，您需要return false。您需要在事件接線中返回handleChange函數中的返回值;像

<input type="text" onKeyPress="return handleChange(event)" />

總之，你可以嘗試：

<form action="." method="post"> 
    <div id="email-wrapper"> 
     <input type="text" placeholder="Your email" name="email" ref="email" onKeyPress={return this.handleChange(event)}/> 
    </div> 
    <span class="signup-error">Please provide a valid email.</span> 
</form> 
.... 
.... 
<button id="next-btn" onClick={this.saveAndContinue}>Next</button> 

<script> 
    handleChange = (event) => { 
     event.preventDefault(); 
     var keyCode = event.keyCode || event.which; 
     if (keyCode == '13'){ 
      console.log('enter pressed'); 
      return false; 
     } 
    } 
</script>

來源

2016-07-25 19:05:26

這是因爲當您按Enter鍵時，表單上的操作完成。所以你需要從表單中捕捉行動並防止違約。

您可以使用相同的事件處理程序的形式onsubmit

<form action="." onsubmit={this.saveAndContinue} method="post"> 
....

來源

2016-07-25 18:09:36 adrianj98

首先處理輸入字段onkeypress事件，像這樣：

<input type="text" placeholder="Your email" name="email" ref="email" onkeypress="handleEnterKey(event)"/>

然後創建功能handleEnterKey如下：

function handleEnterKey(e){ 
    if(e.keyCode == 13){ // enter pressed 
     try{ 
      e.preventDefault ? e.preventDefault() : (e.returnValue = false); 

      //DO ALTERNATE ACTION RATHER THAN SEND ENTER 

     }catch(err){ 
      console.log(err.message); 
     } 
    } 
}

有時還會使用舊版本的Internet Explorer，並且減少[R知名瀏覽器event.preventDefault（）將不足以從propogating父所以您也可以使用停止輸入鍵：

event.stopPropagation();

希望這有助於。

來源

2016-07-25 18:55:02 DatumPlane

嘗試在你的onClick你的函數前添加return false;屬性

來源

2016-07-25 19:01:24 coderodour

如何防止在輸入字段中按Enter鍵時發生重定向？

回答

相關問題