jquery - jQuery で入力中に最後の文字をターゲットにする

Question

入力フィールドに小さな入力効果を追加しようとしています。しかし、入力中の文字のみを対象とし、既に入力されている文字はそのままにしておきたいと思います。

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

Answer 1

これは、テキスト ボックスだけではできません。これに対する 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>');
});