0

しばらくの間、解決策を探していましたが、まだコードを機能させることができません。

「入力」イベントをバインドしようとしています。これが私がこれまでに持っているものです

<script type="text/javascript">
$(document).ready(function () {
    $('#txtRTMUserID').bind('keyup', function () {
        var inputValue = $('#txtRTMUserID').val();
        inputValue = inputValue.replace(/-/g, "");
        var outputVal = "";
        var inputLength = inputValue.length;
        for (var i = 0; i < inputLength; i++) {

            outputVal += inputValue.charAt(i);

            if (i == 7) {
                outputVal += "-";
            }
            if (i == 11) {
                outputVal += "-";
            }
            if (i == 15) {
                outputVal += "-";
            }
            if (i == 19) {
                outputVal += "-";
            }
        }
        $('#txtRTMUserID').val(outputVal);
    });
});

ここに私のテキストボックスコントロールがあります:

<input type="text" id="txtUserID" value = "@ConsumerID"  tabindex="20" style="width: 250px;" maxLength="36"/>

アップデート：

ようやく貼り付けイベントで動作するようになりました。上記の更新されたスクリプトを参照してください。ただし、1 つの問題として、有効な GUID を貼り付けて右矢印を押すと (修正するために)、すぐにテキスト ボックス内のテキストの最後に戻ります。ユーザーが修正できるようにする必要があります。

4

4 に答える 4

2

  1. イベントは使用しないでくださいinput。多くのブラウザーではサポートされていません。keyup代わりに使用してください。貼り付けでも機能します。

  2. jQuery と純粋な JS を混ぜない$(this).val()でください。document.getElementById("txtUserID").value

例：

$(document).ready(function() {
    $('#txtUserID').bind('keyup', function() {
        var inputValue = $(this).val();
        inputValue = inputValue.replace(/-/g, "");
        // and other replacements here, e.g.
        // inputValue = inputValue.replace(/(^.{7}|.{4})/g, "$1-");
        $(this).val(inputValue);
    });
});

デモ

#はい、あなたは識別子の前に忘れていました

更新されたデモ

于 2013-07-24T01:55:07.483 に答える
0

私は2つのことを見つけます

#selectorに がありませ$('#txtUserID')ん。コードをラップして、$(function(){DOM 対応でロードする必要があります。

    $(function(){

        $('#txtUserID').bind('input', function () {

              ...

        });
    });
于 2013-07-24T01:53:52.437 に答える
0

私が間違っていなければ、 onChange イベントを発生させたいと思います。したがって、コードを次のように変更する必要があります。

$('#txtUserID').bind('change', function () {
    var inputValue =     $(this).val();
    inputValue = inputValue.replace(/-/g, "");
    var outputVal = "";
    var inputLength = inputValue.length;
    for (var i = 0; i < inputLength; i++) {

        outputVal += inputValue.charAt(i);

        if (i == 7) {
            outputVal += "-";
        }
        if (i == 11) {
            outputVal += "-";
        }
        if (i == 15) {
            outputVal += "-";
        }
        if (i == 19) {
            outputVal += "-";
        }
    }
    $(this).val(outputVal);
});

デモ: http://jsfiddle.net/Rb8BS/

アップデート

onInput または paste イベントを発生させたい場合は、次のように変更できます。

$('#txtUserID').bind('change', function () {
    var inputValue =     $(this).val();
    inputValue = inputValue.replace(/-/g, "");
    ...  
    ...
    ...
});

デモ: http://jsfiddle.net/Rb8BS/1/

于 2013-07-24T01:54:33.887 に答える
0

OnInput イベントを使用することもできます...テキストの変更時にイベントを発生させたい場合

< script type="text/javascript">

      function OnInput (event) {
                  var inputValue = document.getElementById("txtUserID").value;

    inputValue = inputValue.replace('/-/g', "");
    var outputVal = "";
    var inputLength = inputValue.length;
    for (var i = 0; i < inputLength; i++) {

        outputVal += inputValue.charAt(i);

        if (i == 7) {
            outputVal += "-";
        }
        if (i == 11) {
            outputVal += "-";
        }
        if (i == 15) {
            outputVal += "-";
        }
        if (i == 19) {
            outputVal += "-";
        }
    }
    document.getElementById("txtUserID").value = outputVal;

    }

    < /script>

    <html>
    <body>
    <input type="text" id="txtUserID" oninput="OnInput (event)" value = "@ConsumerID"  tabindex="20" style="width: 250px;" maxLength="36"/>
    </body>
    </html>
于 2013-07-24T02:11:44.943 に答える