提交表單輸入

您好，所以我有以下代碼提交表單輸入

<div id="js_example"> 
        <p id=js_intro_text> Introduce yourself! </p> 
        <form id="js_form"> 
         Please enter your name: <input id = "name_form" type="text" name="full_name"><br> 
        <input type="button" onclick=greet() value="submit"> 
        </form> 
        <p id="js_intro_answer"></p> 
    </div>

這是一個非常簡單的表格，有一個按鈕，讀取格式的文本框的值，並根據名字，他們問候用戶類型。但是，激活該功能的唯一方法是按下提交按鈕。有沒有辦法通過在用戶選擇所述文本框時按下Enter鍵來激活文本框中的greet（）函數？

感謝

來源

2017-01-02 alexp2603

你指的是不是一個提交按鈕按鈕。相反這是一個「按鈕」類型的按鈕，沒有隱式的副作用。「提交」是其文字內容。 – traktor53

有一個提交按鈕
綁定的事件處理程序的形式

這樣的提交事件替換按鈕：

document.querySelector("#js_example").addEventListener("submit", myFunction); 
 

 
function myFunction (event) { 
 
    event.preventDefault(); 
 
    console.log("Submit event fired on form with id " + this.id); 
 
}

<div id="js_example"> 
 
    <p id=js_intro_text>Introduce yourself!</p> 
 
    <form id="js_form"> 
 
    <label for="name_form">Please enter your name:</label> 
 
    <input id="name_form" type="text" name="full_name"> 
 
    <br> 
 
    <input type="submit" value="submit"> 
 
    </form> 
 
    <p id="js_intro_answer"></p> 
 
</div>

（注意：Stackoverflow的配置阻止該演示程序正常工作並觸發錯誤：由於表單的框架已被沙箱化，未設置「允許表單」權限，所以阻止向''提交表單。。一個工作演示是hosted externally）

來源

2017-01-02 00:11:04 Quentin

第一個代碼塊在

表單通常用於將數據發送回服務器，但它看起來像從您的按鈕的「onclick」屬性（它阻止窗體重新加載頁面），您是隻看客戶端。

你可以爲此使用一種形式，但更直接的方法是擺脫窗體並讓你的文本框聽輸入鍵。

這兩種方法的簡單的例子是在這個答案（重複的問題，真的）

https://stackoverflow.com/a/13987669/7353829

來源

2017-01-02 00:17:33

-1

Is there a way to activate the greet() function wihtin the text box by pressing enter while the user has selected said text box?

是的，你如果選擇了文本框可以dissallow提交時提交事件通過檢查發射document.activeElement

例如，使用爲具有id屬性的元素設置全局變量並在窗口加載後添加提交處理程序：

window.onload = function(){ 

    js_form.onsubmit = function() { 
     if(document.activeElement == name_form) { 
      greet(); 
      return false; 
     } 
    } 
};

這將允許您在以後單獨添加一個真實的提交按鈕。爲了防止提交來自，而不是測試特定的一個（name_form）任何輸入元素，問候測試可改爲

if(document.activeElement.tagName == "INPUT") {

來源

2017-01-02 00:35:40 traktor53

相關問題

提交表單輸入

回答

相關問題