Question

我的要求是我的文本框不应该接受脚本标签（即＆lt;和＆gt;）。当我第一次打开页面时，我的文本框不允许脚本标记（即＆lt;和＆gt;）。

一段时间后，它只允许使用字母数字字符。当我刷新页面时它工作正常。任何人都可以帮助这个。我怎么能得到这个解决方案？或者有什么简单的方法。

我的代码：

<input name="headerTextBoxs" id="headerTextBox" size="55" type="text" onKeypress="return keyRestricted(event)", onKeydown="return keyRestricted(event)" value="" />

<script type="text/javascript">
    function keyRestricted(evt) {
        var theEvent = evt || window.event;
        var key = theEvent.keyCode || theEvent.which;

        var keychar = String.fromCharCode(key);
        //alert(keychar);
        var keycheck = /[a-zA-Z0-9]/;

        if ( (key == 60 || key == 62)) // not allowing script tags
        {

            if (!keycheck.test(keychar)) {
                theEvent.returnValue =false ; //for IE
                if (theEvent.preventDefault) theEvent.preventDefault(); //Firefox

            }
        }
    }

</script>

另一种方式： 我的要求是相同的，不允许脚本标签（即＆lt;和＆gt;）。这里的问题是它在Mozilla Firefox中运行良好。但在谷歌cromo和IE浏览器中我的文本框不允许向后文本（即左箭头（＆lt ;-)）。我只是这样写的。
我的代码：

<input name="headerTextBoxs" id="headerTextBox" size="55" type="text" onkeyup = "this.value=this.value.replace(/[<>]/g,'');" />

Answer 1

我会使用change事件来执行此操作。

<input type="text" name="name" onchange="validate(this);"/>

function validate(input_element) {
    if( /(<|>)/.test( input_element.value ) ) {
        alert( "< and > are not allowed characters" );
    }
}

这对性能的影响较小，如有必要，您也可以稍后使用验证功能。

演示here

Answer 2

这对我来说没问题。

<!DOCTYPE html>
<html>
    <head>
        <script>
            function keyRestricted(e) {
                e= e|| window.event;
                var key= e.keyCode || e.which;

                var keychar= String.fromCharCode(key);
                var keycheck = /[a-zA-Z0-9]/;

                if ((key == 60 || key == 62)){
                    if (!keycheck.test(keychar)) {
                        e.returnValue =false ;
                        if (e.preventDefault) e.preventDefault();
                    }
                }
            }
        </script>
    </head>
    <body>
        <input size="55" type="text" onKeypress="keyRestricted(event);" value="" />
    </body>
<html>

Answer 3

仅在您想要或多或少地响应时才尝试onkeyup事件。

当您将焦点放在onchage时会发生

<input>事件，因此事后将会有点事实。

javascript在刷新页面之前无法正常工作

3 个答案: