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

时间:2015-08-13 08:41:40

标签: javascript javascript-events

我想立即显示用户的输入,因此每个输入都有一个相应的显示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的新手..是否有办法将所有这些相同的脚本组合在一起,以便一个键功能处理所有即时输入显示?

2 个答案:

答案 0 :(得分:2)

&#13;
&#13;
$('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());
});
&#13;
<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>
&#13;
&#13;
&#13;

考虑一下(我改变了HTML的示例,但是你的HTML很好)

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

&#13;
&#13;
$('input').keyup(function(){
  $('#output_'+$(this).attr('name')).html($(this).val());
});
&#13;
<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>
&#13;
&#13;
&#13;

在这种情况下,输出字段的ID与输入字段的名称相同,但前缀为&#34;输出_&#34;

或者,如果您有一些字段无法使用输出字段,请考虑告诉输入字段它们有输出字段:

&#13;
&#13;
$('input').keyup(function(){
  var outputId = $(this).data('output');
  if (outputId) {
    $(outputId).html($(this).val());
  }
});
&#13;
<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>
&#13;
&#13;
&#13;

注意data-output-attribute链接到output-div。

答案 1 :(得分:1)

您可以通过两种方式找到处理函数事件的来源:thisevent.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有很多方法,但是如果你想使用id,你可以创建字典:

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

并且处理函数将是

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