Значение поля ввода JQUERY для сохранения в переменной - PullRequest
Новая
       15

Значение поля ввода JQUERY для сохранения в переменной

8 голосов
/ 24 декабря 2011

Я не могу записать значение, введенное пользователем в текстовое поле, в переменную.

Я не хочу использовать <form>, есть ли другой способ сделать это? 

   <html>
   <head>
   <style>

     p { color:blue; margin:8px; }
     </style>
     <script src="http://code.jquery.com/jquery-latest.js"></script>
   </head>
   <body>
   <input type="text" id="txt_name"  />

   <script type="text/javascript">
   value = $("#txt_name").val(); 
   $("#dom_element").text(value);
   </script>

   </body>
   </html>

Ответы [ 3 ]

11 голосов
/ 24 декабря 2011

Если вы хотите получить значение, которое вводит пользователь, вам нужно сделать это в ответ на какое-то событие.Событие keyup происходит (хотите верьте, хотите нет), когда пользователь печатает и отпускает ключ.Если вы перехватываете keyup, вы можете обновлять свою переменную при каждом нажатии клавиши, но вы должны также перехватывать «изменения», чтобы разрешить вставку и перетаскивание изменений, которые не используют клавиатуру.Событие «изменение» происходит, когда пользователь изменяет поле, а затем щелкает или вкладывает его.

Кроме того, в данный момент ваша переменная value является глобальной, но если все, что вы используете, этоустановите значение другого поля, которое вам вообще не нужно: 

$("#txt_name").on("keyup change", function() {
   $("#dom_element").text(this.value);
});

// OR, if you need the variable for some other reason:
$("#txt_name").on("keyup change", function() {
   var value = this.value; // omit "var" to make it global
   $("#dom_element").text(value);
});

Обратите внимание, что в функции обработчика событий this будет элемент dom, поэтому вы можете и должны получить его значение напрямую без jQuery..

Если вы используете старую версию jQuery, используйте .bind() вместо .on().

3 голосов
/ 24 декабря 2011

Вы имеете в виду, как это?

Сценарий: 

jQuery(function(){
    $("#txt_name").keypress(function() {
      var value = $("#txt_name").val(); 
      $("#myDiv").text(value);
    });
});

HTML: 

<form>
  <fieldset>
    <input id="txt_name" type="text" value="Hello World" />
  </fieldset>
</form>
<div id="myDiv"></div>

Надеюсь, это поможет вам.

1 голос
/ 24 декабря 2011 
<script>
   $('#txt_name').keyup(function(){
      value = $("#txt_name").val(); 
      $("#dom_element").val(value);
   });
</script>

это из api.jquery.com :

Метод .text () нельзя использовать для ввода данных или сценариев.Чтобы установить или получить текстовое значение элементов input или textarea, используйте метод .val ().Чтобы получить значение элемента script, используйте метод .html ().

Начиная с jQuery 1.4, метод .text () возвращает значение узлов текста и CDATA, а также узлов элементов.

...