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"/>

更新：

我终于让它在粘贴事件上工作了。请参阅上面的更新脚本。但是有一个问题，当我粘贴有效的 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

我发现了两件事

#您在选择器中缺少$('#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 事件...如果您想在文本更改时触发事件

<脚本类型="文本/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 回答