獲取輸入值 <form> 排隊

Question

遵循我的代碼：

<script>
function getText(text){
  alert(text);
}
</script>
<form action="getText(/*here function for get text*/)">
   <input type="text" class="text"/>
   <input type="submit"/>
   <div></div>
</form>

如何在指定的<form>中使用純javascript獲取textarea值？

Answer 1

action屬性包含表單將提交的URL，而不是JavaScript。

如果要使用JavaScript處理表單數據，請將submit事件處理程序綁定到它。 這將在表單的上下文中觸發，因此您可以通過this方式訪問表單元素。

您可以通過elements集合訪問表單控件。 它們將具有包含其值的value屬性。

<form action="/some/handler" id="myForm">
   <textarea name="myTextArea" class="text"></textarea>
   <input type="submit">
   <div></div>
</form>
<script>
function getText(text){
  alert(text);
}
function formSubmitHandler(evt) {
    var textarea = this.elements.myTextArea;
    getText(textarea.value);
}
document.getElementById('myForm').addEventListener('submit', formSubmitHandler);
</script>

如果您要完全使用JS處理表單處理（當JS可用時），您可能希望調用evt.preventDefault() ）。

Answer 2

如果你想在不使用選擇器的情況下輸入值，那么你可以使用這樣的東西，但請記住，你從輸入標簽得到的值應該用作表單元素的第一個子元素。

<form action="">
   <input type="text" class="text"/>
   <input type="button" onclick="getText()" value="get value">
   <div></div>
</form>

<script>
function getText(text){
  var textValue = document.getElementsByTagName('input')[0].value;
  alert(textValue);
}
</script>

編輯

如果你想按下回車鍵后輸入值的文字，那么你可以這樣做。

<form action="">
   <input type="text" class="text" onkeydown="getText(event)"/>
   <div></div>
</form>

<script>
function getText(event){
    var textValue = document.getElementsByTagName('input')[0].value;
    if(event.which == 13){
        alert(textValue);
    }
}
</script>

Answer 3

這里有一個小功能給你

function getTextAreaByClass(lookFor) {
    var i; /* I always define at the top so jslint doesn't carp */
    var elems = document.getElementsByTagName("textarea");
    for (i in elems) {
         if((' '+elems[i].className+' ').indexOf(' '+lookFor+' ') > -1) {
              return elems[i].innerHTML;
         }
    }
    return ""; /* or return false or whatever else you want to denote not found */

}

以上將搜索所有textarea標簽，查找匹配的類，並將返回textarea內的內容。