2015-07-22 3 views
0

Я хочу очень простую вещь, чтобы иметь входную и выходную текстовую область, а затем кнопку, которая заставляет javascript читать область ввода, а затем задавать текст области вывода в надлежащим образом. Мне было предложено использовать jQuery для этого, но кажется, что выбор фактически не запускается каждый раз при нажатии кнопки.Кнопка 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> 

, но когда я нажимаю на кнопку после изменения текста на что-либо, кроме текста, он показывает на странице загрузки, она до сих пор не основывает выход на текущий текст ввода. Я предполагаю, что я делаю ошибку немого новичка?

ответ

1

Вы должны использовать .val(), чтобы получить значение текстового поля не .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>

1

Получить с помощью .val() вместо .text()

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

DEMO