39547


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

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

# ====質問====

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

[code]

    // 数量枠は．．．数値のみ入力可・フォーカス外れたらカンマ表示・フォーカスしたらカンマ外した表示
        $("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);
            }
        });
    
[/code]

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

[code]

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

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


CC BY-SA 3.0
2017-11-13T10:43:41.567
39543
2017-11-13T13:32:41.000
2020-06-17T08:14:45.997
-1
25696
question
javascript jquery html5
数値項目用のINPUT TYPE=TEXTの枠、フォーカスがあたったら、カーソルを一番右に配置したい


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

[code]

    $(function(){
            $("input").focus(function(){
                if($(this).attr('type') === 'text'){
                    var data = $(this).val();
    //                $(this)val("").val(data);
                    $(this).val("");
                    $(this).val(data);
                }
            });
        });
[/code]

[code]

        input {
            text-align: right;
        }
[/code]

[code]

    <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!!">
[/code]


CC BY-SA 3.0
2017-11-13T11:47:32.503
39545
2017-11-13T12:06:45.190
2017-11-13T12:06:45.190
22793
22793
39543
answer


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

[code]

    "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();
      }
    }
    
[/code]


CC BY-SA 3.0
2017-11-13T13:32:41.000
39547
2017-11-13T13:32:41.000
4388
39543
answer