多个 keyup 事件的一个事件处理程序

Question

我想即时显示用户的输入，所以每个输入都有相应的显示div。

html:

<div class="row">
    <div class="col-lg-3">
        <?php echo $this->Form->input('contact_person'); ?>
    </div>
    <div class="col-lg-3">
        <?php echo $this->Form->input('mobile'); ?>
    </div>
    <div class="col-lg-3">
        <label for=""><?php echo __('Contact Person'); ?></label>
        <div id="test1"></div>
    </div>  
    <div class="col-lg-3">
        <label for=""><?php echo __('Mobile'); ?></label>
        <div id="test2"></div>
    </div>
</div>

javascript:

$('#PostContactPerson').keyup(function(){
   $('#test1').html(this.value);
});
$('#PostMobile').keyup(function(){
   $('#test2').html(this.value);
});

我是 Javascript 的新手..有没有办法将所有这些相同的脚本结合起来，以便一个关键函数处理所有即时输入显示？

Answer 1

您可以通过两种方式找到处理函数的事件来源：this或event.target:

<div>first</div>
<div>second</div>

<script>
var divs = document.getElementsByTagName("div");
for(var i=0; i<divs.length; ++i) divs[i].addEventListener("click",function(e) {
    alert(e.target.innerHTML);
    alert(this.innerHTML);
});
</script>

尝试点击 div on the fiddle。

DOM traversal有很多方法，但是如果要使用ids，可以创建字典：

var targets = {
  "PostContactPerson": "test1",
  "PostMobile": "test2"
};

处理函数为

function(e) {
  $('#'+targets[this.id]).html(this.value);
}

Answer 2

$('input').keyup(function(){
  var outputId = null;
  switch ($(this).attr('name')) {
      case 'contact_person': outputId = '#test1'; break;
      case 'mobile': outputId = '#test2'; break;
  }
  $(outputId).html($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
    <div class="col-lg-3">
        <input name='contact_person' type="text" />
    </div>
    <div class="col-lg-3">
        <input name='mobile' type="text" />
    </div>
    <div class="col-lg-3">
        <label for="">Contact Person</label>
        <div id="test1"></div>
    </div>  
    <div class="col-lg-3">
        <label for="">Mobile</label>
        <div id="test2"></div>
    </div>
</div>

考虑一下（我更改了 HTML 以使示例生效，但您的 HTML 就可以了）

但您可能想要更改输出字段的 ID：

$('input').keyup(function(){
  $('#output_'+$(this).attr('name')).html($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
  <div class="col-lg-3">
    <input name='contact_person' type="text" />
  </div>
  <div class="col-lg-3">
    <input name='mobile' type="text" />
  </div>
  <div class="col-lg-3">
    <label for="">Contact Person</label>
    <div id="output_contact_person"></div>
  </div>  
  <div class="col-lg-3">
    <label for="">Mobile</label>
    <div id="output_mobile"></div>
  </div>
</div>

在这种情况下，输出字段的 ID 与输入字段的名称相同，但带有前缀 "output_"

或者如果您有一些字段不应该与输出字段一起使用，请考虑告诉输入字段它们有一个输出字段：

$('input').keyup(function(){
  var outputId = $(this).data('output');
  if (outputId) {
    $(outputId).html($(this).val());
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
  <div class="col-lg-3">
    <input name='contact_person' type="text" data-output="#test1" />
  </div>
  <div class="col-lg-3">
    <input name='mobile' type="text" data-output="#test2" />
  </div>
  <div class="col-lg-3">
    <label for="">Contact Person</label>
    <div id="test1"></div>
  </div>  
  <div class="col-lg-3">
    <label for="">Mobile</label>
    <div id="test2"></div>
  </div>
</div>

注意data-output-attribute to link to output-div.

多个 keyup 事件的一个事件处理程序

One event handler for multiple keyup events

javascript

javascript-events