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

Question

我正在尝试在输入字段中添加一个小的打字效果。但我只想针对正在输入的字母，而将那些已经输入的字母单独留下。

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

Answer 1

你不能只用一个文本框来做到这一点。这是对此的一种可能解决方案的概念证明。如果您希望我帮助您想出更适合您具体需要的东西，请告诉我。

小提琴

我使用了 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>');
});