Question

我限制用户使用jquery在文本框中输入特殊字符。我正在向用户显示错误消息作为bootstrap tooltip.but如果用户在文本框中输入正确的数据，我无法销毁引导工具提示。

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <script src="script.js"></script>
        <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
        <link href='http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,500,400italic,700,700italic' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="//storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-red.min.css" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="//storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js"></script>
        <script>
            var specialKeys = new Array();
            specialKeys.push(8); //Backspace
            specialKeys.push(9); //Tab
            specialKeys.push(46); //Delete
            specialKeys.push(36); //Home
            specialKeys.push(35); //End
            specialKeys.push(37); //Left
            specialKeys.push(39); //Right
            specialKeys.push(64);
            var mainelemnt;
            function IsAlphaNumeric(elment, e) {
                mainelemnt = elment;
                var keyCode = (window.event) ? e.charCode : e.keyCode;
                var ret = ((keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90) || keyCode == 64 || keyCode == 46 || keyCode == 32 || (keyCode >= 97 && keyCode <= 122) || (specialKeys.indexOf(e.keyCode) != -1 && e.charCode != e.keyCode));
                if (ret == false) {
                    $(mainelemnt).tooltip('show');
                } else {
                    $(mainelemnt).tooltip('destroy');
                }
                return ret;
            }

        </script>
    </head>
    <body>
        <div id="mydiv" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" style="margin-top:100px">
            <input class="mdl-textfield__input" type="text" id="username"  onkeypress="return IsAlphaNumeric(this, event);"  data-placement="top" data-toggle="tooltip" data-original-title="special charecters are not allowed" onblur="ValidateEmail(this)" />
            <label class="mdl-textfield__label" for="username">Username</label>
        </div>
    </body>
</html>

Plunker代码：https://plnkr.co/edit/L4Hqq15HfQgOGm2R1m80?p=preview。

Answer 1

我认为你只是一个过于复杂的问题。当密钥发生时，我们不应该测试字符，而是测试整个字符串。

如果有人用鼠标粘贴东西怎么办？现在你可以自己分配on blur ...

$.fn.isValidAlphaNum = function () {
    return /^[a-zA-Z0-9]*$/.test($(this).val());
};

$('#username').keyup(function (e) {
    if (!$(this).isValidAlphaNum()) {
        alert('Not valid');
        //Show the tooltip
    } else {
        alert('Valid');
        //Hide the tooltip
    }
});

这是一个有效的jsFiddle。

无法破坏Bootstrap工具提示

1 个答案: