Question

我想要一个非常简单的事情，有一个输入和输出文本区域，然后是一个使javascript读取输入区域的按钮，然后以适当的方式设置输出区域的文本。我被告知使用jQuery来执行此操作，但似乎每次按下按钮时选择都不会实际运行。

我的设置是这样的：

<html>
<head><title>Example Input-Output</title></head>
<body>

<p><textarea id="inputArea" rows="7" cols="25">Input Text Here</textarea></p>
<p><button id="theButton" type="button">Activate</button></p>
<p><textarea id="outputArea" rows="7" cols="25">Output Text Here</textarea></p>

<script src="jquery.js"></script>

<script>
$(document).ready(function(){
    $("#theButton").click(function(event){
        var inputValue = $("#inputArea").text();
        $("#outputArea").text("input was:\n"+   inputValue);
    });
});
</script>

</body>
</html>

但是当我在将文本更改为在页面加载时显示的文本以外的任何内容时单击按钮时，它仍然不会将输出基于当前输入文本。我假设我犯了一些愚蠢的初学者的错误？

Answer 1

您需要使用.val()来获取textarea的值而不是.text()

$(document).ready(function() {
  $("#theButton").click(function(event) {
    var inputValue = $("#inputArea").val();
    $("#outputArea").text("input was:\n" + inputValue);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
  <textarea id="inputArea" rows="7" cols="25">Input Text Here</textarea>
</p>
<p>
  <button id="theButton" type="button">Activate</button>
</p>
<p>
  <textarea id="outputArea" rows="7" cols="25">Output Text Here</textarea>
</p>

Answer 2

使用.val()代替.text()

$("#inputArea").val();

<强> DEMO

jQuery按钮不会对实时数据执行操作

2 个答案: