Question

我有一类朋友的名字＆＃39;在应该采用＆＃39;输入[name =＆＃34; friends-first-name＆＃34;]的值的段落范围内。

我有一个＆＃39;你的名字＆＃39;在应该采用＆＃39;输入[name =＆＃39; your-first-name＆＃39;]的值的段落范围内。

我的代码如下：

           <div class="form-message">
                <p>Hey <span class="friends-name">[Friend's First Name],</span></p>
                <p>I wanted to reach out b/c I bumped into a solid company. They do fulfillment - shipping - for rising stars</p>
                <p>I'll let you guys take it from there!</p>
                <p class="your-first-name">[Your First Name]</p>
            </div>


           <form id="referral-form" method="POST">

                    <div class="form-left">
                        <div class="form-fieldset form-fieldset_type-personal">
                            <h3 class="form-fieldsetHeading">Your Info</h2>
                            <input class="form-field" data-bind="value: firstName" type="text" name="your-first-name" placeholder="First Name">
                            <input class="form-field" data-bind="value: lastName" type="text" name="your-last-name" placeholder="Last Name">
                            <input class="form-field" data-bind="value: email" type="email" name="your-email" placeholder="Email">
                        </div>
                    </div>

                    <div class="form-right">
                        <div class="form-fieldset form-fieldset_type-friends">
                            <h3 class="form-fieldsetHeading">Friend's Info</h2>
                            <div data-bind="foreach: friends">
                                <div class="form-friend">
                                    <input class="form-field" data-bind="value: firstName" name="friends-first-name" type="text" placeholder="First Name">
                                    <input class="form-field" data-bind="value: lastName" name="friends-last-name" type="text" placeholder="Last Name">
                                    <input class="form-field" data-bind="value: company" name="friends-company" type="text" placeholder="Company">
                                    <input class="form-field" data-bind="value: email" name="friends-email" type="email" placeholder="Email">
                                </div>
                            </div>

                        </div>
                    </div>
            </form>

使用jQuery的任何方法吗？

Answer 1

如果要在每个用户输入上更新它，请使用keyup事件。

当用户在键盘上释放键时，keyup事件将发送到元素。它可以附加到任何元素，但事件仅发送到具有焦点的元素。

试试这个：

＆＃13;

$('[name="your-first-name"]').on('keyup', function() {
  $('.your-first-name').text(this.value);
});

$('[name="friends-first-name"]').on('keyup', function() {
  $('.friends-name').text(this.value);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="form-message">
  <p>Hey <span class="friends-name">[Friend's First Name],</span>
  </p>
  <p>I wanted to reach out b/c I bumped into a solid company. They do fulfillment - shipping - for rising stars</p>
  <p>I'll let you guys take it from there!</p>
  <p class="your-first-name">[Your First Name]</p>
</div>


<form id="referral-form" method="POST">

  <div class="form-left">
    <div class="form-fieldset form-fieldset_type-personal">
      <h3 class="form-fieldsetHeading">Your Info</h3>
      <input class="form-field" data-bind="value: firstName" type="text" name="your-first-name" placeholder="First Name">
      <input class="form-field" data-bind="value: lastName" type="text" name="your-last-name" placeholder="Last Name">
      <input class="form-field" data-bind="value: email" type="email" name="your-email" placeholder="Email">
    </div>
  </div>

  <div class="form-right">
    <div class="form-fieldset form-fieldset_type-friends">
      <h3 class="form-fieldsetHeading">Friend's Info</h3>
      <div data-bind="foreach: friends">
        <div class="form-friend">
          <input class="form-field" data-bind="value: firstName" name="friends-first-name" type="text" placeholder="First Name">
          <input class="form-field" data-bind="value: lastName" name="friends-last-name" type="text" placeholder="Last Name">
          <input class="form-field" data-bind="value: company" name="friends-company" type="text" placeholder="Company">
          <input class="form-field" data-bind="value: email" name="friends-email" type="email" placeholder="Email">
        </div>
      </div>

    </div>
  </div>
</form>

＆＃13;

Fiddle here

Answer 2

如果您想要输入文字。

$("span.friends-name").text($("input[name='your-first-name']").val());

jQuery根据表单输入的值更改段落span标签的文本

2 个答案: