Question

我想实现这一目标：每个生成的关闭按钮将关闭包含div的其他按钮。

同样，每个具有class的输入都将值插入到相应的输入中。

以下脚本可以一起完成所有操作。

$('body').find(':input').addClass('input-target');
$(".input-target").each(function() {
  $(this).on('focus', function() {
    $(this).after(' <div class="keyboard" style=""><input type="text" class="first"><button class="close-keyboard">X</button></div>');
  })
});

$(document).ready(function() {
  $(document).on('keyup', '.first', function() {
    $(".first").each(function() {
      $('.input-target').val($(".first").val());
    });
  });
});


$(document).bind('click', function(e) {
  var target = $(e.target);
  if (target.is('.keyboard')) {
    e.preventDefault(); // if you want to cancel the event flow
    // do something
    //  alert('clicked on keyboard class');
  } else if (target.is('.close-keyboard')) {
    e.preventDefault();
    // do something else
    // alert('clicked on close-keyboard class');
    $('.keyboard', this).hide();
  }
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.input-target {
  position: relative !important;
  background: #efefef;
}

.keyboard {
  background: grey;
  color: #fff;
  display: block;
  position: absolute;
  z-index: 99999999;
}

#container {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">
  <p>Div on the fly</p>
  <p>
    <input>
  </p>
  <p>
    <textarea rows="4"></textarea>
  </p>
</div>

分别处理每个元素

0 个答案: