Question

我试图在输入字段中添加一个小的输入效果。但我想只针对被输入的字母，留下那些已单独输入的字母。

$(".field").keydown(function() {
$('.field').css('font-size','25px');
});
$(".field").keyup(function() {
$('.field').css('font-size','15px');
});

Answer 1

仅使用文本框无法执行此操作。这是一个可能的解决方案的概念证明。如果您希望我帮助您提出更符合您需要的产品，请告诉我们。

Fiddle

我使用了keyup事件并分离了p和span标签以使其工作。

<强> HTML

<input class='inBox'></input>
<div class='overlay'>
  <p class='text'></p>
</div>

<强> CSS

input {
  color: white;
  z-index: 1;
  position: absolute;
  top: 10px;
  left: 10px;
}
.overlay {
  z-index: 10;
  position: absolute;
  top: -2px;
  left: 16px;
}
.lastLetter {
  color: blue;
}

<强>的Javascript

$('.inBox').on('keyup', function() {
  var str = $(this).val();
  $('.text').html(str.slice(0, -1) + 
                  '<span class="lastLetter">' +
                  str.charAt(str.length-1) + 
                  '</span>');
});

使用jQuery键入时定位最后一个字母

1 个答案: