1. ホーム
  2. javascript

[解決済み] カーソル位置がずれることなく入力の値を更新する方法 [重複]について

2023-05-03 06:31:55

質問

JavaScriptを使って、テキストボックスの値が小文字であることを義務付けたいのです。下記のコードを試しましたが、キーを押すたびにカーソルが入力の最後にジャンプしてしまいます。これを避けるにはどうしたらよいでしょうか。

$("#beLowerCase").keyup(function(){
    $(this).val( $(this).val().toLowerCase() );
});

どのように解決するのですか?

$("#beLowerCase").on('input', function(){

    // store current positions in variables
    var start = this.selectionStart,
        end = this.selectionEnd;

    this.value = this.value.toLowerCase();

    // restore from variables...
    this.setSelectionRange(start, end);
});

( フィドル )


これは実はCSSでも有効です。

#beLowerCase{
  text-transform:lowercase;
}

そして、実際の小文字化はサーバがやってくれます...