Question

我一直在寻找一段时间的解决方案，但我仍然不能让我的代码开始工作。

我正在尝试绑定'input'事件。这是我到目前为止所拥有的

<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时，请按右键   箭头（进行更正）它立即让我回到最后   文本框中的文本。我必须让用户做   校正。

Answer 1

不要使用input事件，许多浏览器都不支持此事件，而是使用keyup，它也适用于粘贴
不要将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);
    });
});

<强> DEMO

，是的，你忘记了#之前的标识符

<强> UPDATED DEMO

Answer 2

我发现了两件事

您缺少选择器#中的$('#txtUserID')，并且需要将代码包装在$(function(){中，以便在DOM准备好时加载：

    $(function(){

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

              ...

        });
    });

Answer 3

如果我没错，你想要触发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或粘贴事件，可以更改为：

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

演示：http://jsfiddle.net/Rb8BS/1/

Answer 4

您还可以使用OnInput事件...如果要在文本更改时触发事件

＆LT; script type =“text / javascript”＆gt;

      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>

jQuery .bind绑定函数没有触发

4 个答案:

演示：http://jsfiddle.net/Rb8BS/

更新

演示：http://jsfiddle.net/Rb8BS/1/