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属性包含表单将提交的网址，而非JavaScript。

如果您想使用JavaScript处理表单数据，请bind a submit event handler进行处理。这将在表单的上下文中触发，因此您可以通过this。

访问表单元素

您可以通过elements collection访问表单控件。他们将拥有包含其值的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中的内容。

获取输入值到<form> inline </form>

3 个答案: