如何使用jquery获取div当前文本框

时间:2013-11-19 04:07:18

标签: javascript jquery html

我有多个带有文本框的div想要获取每个div输入框的值并将其显示到该div本身

HTML:

 <div id="product_data" class="ui-sortable">
  <div class="clonedInput" id="add_attribute" style="display: block;">
    <div id="add_attributes">
      <div id="accordion1">
        <h3>
          <input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
          <strong class="attribute_name"></strong> </h3>
          <table cellspacing="0" cellpadding="0" id="attribute_data" class="">
          <tbody>
            <tr>
              <td class="attribute_name"><label>Name:</label>
                <input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
              </td>
              <td rowspan="3"><label>Value(s):</label>
                <textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="clonedInput" id="add_attribute_2" style="display: block;">
    <div id="add_attributes" class="woocommerce_attribute wc-metabox ">
      <div id="accordion1">
        <h3>
          <input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
          <strong class="attribute_name"></strong> </h3>
          <table cellspacing="0" cellpadding="0" id="attribute_data" class="">
          <tbody>
            <tr>
              <td class="attribute_name"><label>Name:</label>
                <input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
              </td>
              <td rowspan="3"><label>Value(s):</label>
                <textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="clonedInput" id="add_attribute_3" style="display: block;">
    <div id="add_attributes" class="woocommerce_attribute wc-metabox ">
      <div id="accordion1">
        <h3>
          <input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
          <strong class="attribute_name"></strong> </h3>
          <table cellspacing="0" cellpadding="0" id="attribute_data" class="">
          <tbody>
            <tr>
              <td class="attribute_name"><label>Name:</label>
                <input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
              </td>
              <td rowspan="3"><label>Value(s):</label>
                <textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

我正在尝试获取输入字段值“id = attribute_name”并将值显示在“”模糊函数上,这是动态文本框

4 个答案:

答案 0 :(得分:2)

$( "input" ).blur(function() {
   var string = $(this).val();
   $(this).parent().append(string);
});

这将在从输入中删除光标时附加文本。根据您的要求设计样式。至少它应该让你知道该怎么做。

http://jsfiddle.net/L4UQJ/

答案 1 :(得分:1)

由于这些HTML元素是动态生成的,请使用以下方法。

   $(document).on('blur', '#attribute_name', function () {
      console.log($(this).val());  //To get the value of the textbox
      $(this).val(' ');
    });

答案 2 :(得分:1)

试试这个..

 $("input[type='text']").on('blur', function () {
          alert($(this).val());  
 });

答案 3 :(得分:1)

最后它正在运作:)

$( "input" ).blur(function() {
            var string = $(this).val();
            $(this).closest('div').find('h3 > strong').html(string);

        });

DEMO