获取文本框值并将其显示到h3元素中

Get the text box value and display it into the h3 element

本文关键字：显示 h3 元素 取文本 获取      更新时间：2023-09-26

尝试获取文本框值并显示在文本框字段上方的h3元素中

这是我的HTML代码：

 <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">**Here Text box value should be displayed**</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>

我正在尝试获取输入字段值<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">，并将该值显示在"

<h3>
          <input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
          <strong class="attribute_name">"**Here the text box value"</strong> </h3>

"在模糊功能上，这是动态文本框

我的Jquery：

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

我在h3中添加了一个id属性，并将其用作模糊事件回调的引用：DEMO HERE

HTML

<strong class="attribute_name" id="output">**Here Text box value should be displayed**</strong> </h3>

jQuery

$("input").blur(function () {
    var string = $(this).val();
    $('#output').html(string);
});

请在此处查看工作演示：http://jsfiddle.net/wPCZ5/

你需要在你的处理程序中做到这一点：

$(this).closest('div').find('h3 > strong').html(string);

所有文本框都可以工作。closest()调用查找DOM层次结构并返回第一个匹配元素。在您的例子中，它是手风琴div。然后find()调用在DOM层次结构中查找匹配元素。最后，html()用提供的字符串替换元素中的当前HTML。您最初对append()的调用会将字符串添加到已经存在的内容中。

这里有一把正在工作的小提琴：http://jsfiddle.net/u63CU/但我认为您不应该像以前那样重复使用类名和ID名。它可能会导致许多不希望的结果，因为jquery通过id或类名进行选择。

<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 id="text-value" class="attribute_name">**Here Text box value should be     displayed**</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>


$( "#attribute_name" ).blur(function() {
    var string = $(this).val();
    $('#text-value').text(string);
});

尝试类似的东西

    $( "input" ).blur(function() {
           $(this).closest('strong.attribute_name').text(this.value);
       });

如果您想将文本框值放在**Here Text box value should be displayed**的位置，请尝试以下操作：

$( "input" ).blur(function() {
    var string = $(this).val();
    $(".attribute_name").text(string);
});
相关文章：