Question

我编写了以下内容，它应该打开一个文本区域，让用户输入数据，在一个名为var的变量中捕获数据，然后显示一个“click here”按钮，然后单击写入屏幕var +“我做了”。但是，我还不知道如何允许用户输入他的数据。当textarea出现时，没有额外的按钮可以点击，只要我点击textarea写入数据我就得到，写入屏幕，nullididit，好像脚本将我的textarea视为按钮本身。显然，我不明白如何允许用户输入他的数据，并点击额外的按钮来表示数据输入结束。有人可以解释一下。

<!DOCTYPE html>
<html>
<head>
        <script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
function getText() {
    var str=document.getElementById("txtArea");
document.write(str + "i did it");
}
</script>
</head>
<body>
<textarea rows="5" cols="30" id = "txtArea> </textarea>
<input type = "button" value="click here" onclick = "getText();" />
  </body>
  </html>

Answer 1

你必须从textarea中提取值，这里有一个例子：http://jsfiddle.net/4jH8s/

代码：

function getText() {
  var area = document.getElementById("txtArea");
  str = area.value // here we got value
  alert(str + " i did it");
}

Answer 2

除了关于在@ Feanor的回答中使用.value的提示之外，尝试在id =“txtArea之后添加一个结尾，以及你有不匹配的引号。这将导致您的标签无法正常关闭。这很可能会导致onclick成为textarea的一部分，因为浏览器会尝试更正你的html

此外，您没有在代码中使用jQuery，因此可以删除jquery的脚本标记

最后，而不是document.write尝试添加另一个div并附加到诸如

之类的html

 <!DOCTYPE html>
 <html>
 <head>

<script>
function getText() {
    var str=document.getElementById("txtArea").value;
      document.getElementById('output').innerHTML +=str + " i did it";
 }
 </script>
</head>
<body>
<textarea rows="5" cols="30" id = "txtArea"> </textarea>
<input type = "button" value="click here" onclick = "getText();" />
<div id="output"></div>
</body>
</html>

因为这比使用document.write

更好

Answer 3

如果您粘贴的代码是您正在测试的确切代码，那么您的部分问题可能是textarea的id属性上缺少双引号。此外，document.getElementById("txtArea")将返回一个对象而不是您要查找的文本值。相反，您可以使用document.getElementById("txtArea").value来获取文本值。如果您只想展示测试，则可能需要使用alert(str + "i did it")代替document.write(str + "i did it")来覆盖文档中的内容。

以下是我在Chrome中测试后所提到的更改的代码。

<!DOCTYPE html>
<html>
<head>
        <script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
function getText() {
    var str=document.getElementById("txtArea").value;
alert(str + "i did it");
}
</script>
</head>
<body>
<textarea rows="5" cols="30" id = "txtArea"> </textarea>
<input type = "button" value="click here" onclick = "getText();" />
</body>
</html>

Answer 4

尝试使用jquery简单，简洁和整洁的代码......

$('input').click(function() {

    var text = $('#txtArea').val();

        alert(text);

});

jsFiddle

textarea和接受输入的按钮

4 个答案: