0

皆様 いつもお世話になっております。

標題の件、数値項目が入る枠は、事前に値が入っていて内容の変更・もしくは削除する場合は、バックスペースキーで操作を行いたいものではないでしょうか?デリートキーではなく。

====質問====

INPUT TYPE=TEXTの枠にフォーカスがあたったら、カーソルを一番右に配置する方法があれば教えてください。ちなみに現況当該枠は以下コーディングを果たしてあります。

// 数量枠は...数値のみ入力可・フォーカス外れたらカンマ表示・フォーカスしたらカンマ外した表示
    $("input[name=amount]").on({
        "keydown": function(e) {
            var k = e.keyCode;
            if (!((k >= 48 && k <= 57) || (k >= 96 && k <= 105) || k == 32 || k == 8 || k == 9 || k == 46 || k == 39 || k == 37)) {
                return false;
            }
        },
            "blur": function() {
            var num = $(this).val();
            num = num.replace(/(\d)(?=(\d\d\d)+$)/g, "$1,");
            $(this).val(num);
            },
            "focus": function() {
            var num = $(this).val();
            num = num.replace(/,/g, "");
            $(this).val(num);
        }
    });

追記: とても大事なことを伝え忘れていました。CSSで当該枠を右詰め表示をしています。

/* 数量入力列のみ右つめ表示 */
input[name='amount'] {
    text-align: right;
}

よろしくお願い致します。

2 件の回答 2

1

以下のような感じでしょうか。

"focus": function(e) {
  var num = $(this).val();
  num = num.replace(/,/g, "");
  $(this).val(num);
  if (this.selectionStart != null) {
    this.selectionStart = this.selectionEnd = this.value.length;
  } else {
    this.createTextRange().select();
  }
}
1
  • urin様 ありがとうございました。期待通りの動作が達成できました。皆さん同じ悩みを持たないのものなのですかねぇ
    – saya24
    Commented 2017年11月13日 14:11
0

javascriptで、空のvalueへ文字列をセットするとカーソルが文字列終わり(右端)に来るので。
以下の様に、試しに書いて見ました。(クリック位置で、選択されたりするのはご愛嬌で,スクリプトを組まなくても、マウスで入力エリア右端をクリックすれば良い様な気もします。)

$(function(){
        $("input").focus(function(){
            if($(this).attr('type') === 'text'){
                var data = $(this).val();
//                $(this)val("").val(data);
                $(this).val("");
                $(this).val(data);
            }
        });
    });
    input {
        text-align: right;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" value="" placeholder="test data in!!">
<input type="text" value="" placeholder="test data2 in!!">
<input type="text" value="" placeholder="test data3 in!!">
<input type="text" value="" placeholder="test data4 in!!">

3
  • yyz様 いつも大変お世話になっております。大事なことを伝え忘れていました。本文に追記致しました、ご確認頂ければ幸いです
    – saya24
    Commented 2017年11月13日 12:06
  • スニペットにcss ”text-align: right;”を追加しました。
    – yyz
    Commented 2017年11月13日 12:12
  • ご用意頂きましたテキストボックスへ順次に1,2,3,4と入力して、シフト+タブで遡って、各テキストボックスへ「1」を入れていくと14,13,12,11となってしまいます...。 数値専用の枠として、これが41,31,21,11となったら、嬉しいのですが、欲張りすぎですかね。
    – saya24
    Commented 2017年11月13日 12:33

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。