Question

大家好我的输入中我的自定义占位符有问题，当我点击它们时，他们的父input没有关注，即使我触发了他们的焦点我也是不能在里面写。

另一个问题是，当我点击占位符时，一切都运行良好，但是当我点击其他内容时input没有集中注意力。你有什么想法解决它吗？

＆＃13;

$('.placeH').click(function() {
  var that = $(this);
  $('input, textarea').focusout();
  that.parent().find('input').focusin();
})

$('input, textarea').focusin(function() {
  var val = $(this).val();
  $('input, textarea').not($(this)).removeClass('active');
  if (!val)
    $(this).parent().find('.placeH').addClass('active');
});
$('input, textarea').focusout(function() {
  var val = $(this).val();
  if (!val)
    $(this).parent().find('.placeH').removeClass('active');
});

＆＃13;

input,
textarea {
  outline: none !important;
}
.placeH {
  position: absolute;
  z-index: 10;
  top: 2px;
  left: 30px;
  transition: cubic-bezier(1, 0, .24, 1) .3s;
  -webkit-transform: cubic-bezier(1, 0, .24, 1) .3s;
  -webkit-transform-origin: center bottom;
}
.placeH.active {
  top: -13px;
  font-size: 12px;
  left: 2px;
  transition: cubic-bezier(1, 0, .24, 1) .3s;
  -webkit-transform: cubic-bezier(1, 0, .24, 1) .3s;
  -webkit-transform-origin: center bottom;
}
input {
  width: 100%;
  height: 50px;
  position: relative;
  display: block;
  margin: 20px 0;
}
.rlt {
  display: block;
  position: relative;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rlt mui1 hidden">
  <input type="email" id="e-mail" class="mail required">
  <p class="placeH">E-mail</p>
</div>
<div class="rlt mui2 hidden">
  <input type="tel" id="phone">
  </label>
  <p class="placeH">Numer telefonu</p>
</div>

＆＃13;

Answer 1

我找到了回答我的问题。 .focusin()使用.focus()触发的触发器在每个浏览器上都很有用。

自定义占位符的输入问题

1 个答案: