Question

我有一个使用j Query在表单上禁用选择文本的示例代码。它适用于Firefox，Chrome和IE10。但我想允许在输入框内选择文本。它适用于Firefox，Chrome，但IE不允许在输入框内选择文本。如何允许在输入框中选择文本值。

注意：我在IE10上测试过最诚挚的问候，

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>jQuery Disable Select Text - Example</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>  
    <script>
        (function($){
            $(document).ready(function () {
                $(document).bind("contextmenu", function (e) {
                    return false;
                });
            });
        })(jQuery);
    </script>   
    <script type="text/javascript">
        (function($){    
            $.fn.ctrl = function (key, callback) {
                if (typeof key != 'object') key = [key];
                callback = callback || function () { return false; }
                return $(this).keydown(function (e)
                {
                    var ret = true;
                    $.each(key, function (i, k) {
                        if (e.keyCode == k.toUpperCase().charCodeAt(0) && e.ctrlKey) {
                            ret = callback(e);}
                        });
                        return ret;
                });
            };
            $.fn.disableSelection = function() {
                this.ctrl(['a','s','c']);
                return this.attr('unselectable', 'off')
                .css({'-moz-user-select':'-moz-none',
                    '-moz-user-select':'none',
                    '-o-user-select':'none',
                    '-khtml-user-select':'none',
                    '-webkit-user-select':'none',
                    '-ms-user-select':'none',
                    'user-select':'none'})
                .bind('selectstart', function(){ return false; });
            };    
        })(jQuery);
        $(':not(input,select,textarea)').disableSelection();
    </script>
</head>
<body>
<form id="_frm">
    <div>   
    <p >Try selecting me with <span style="color:red">your mouse</span> or <span style="color:red">Ctrl+A</span></p>
      First name: <input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      <input type="submit" value="Submit">
    <select>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>
    <ol>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
    </div>
</form> 
</body>
</html>

Answer 1

您的问题位于两个地方：

'user-select'适用于一个元素及其子元素，因此您无需选择不必要的元素。（为了提高效率）
不绑定selectstart事件，因为css属性user-select : none已禁用选择。 IE会将处理程序应用于输入元素，以便您无法选择。

http://jsfiddle.net/EbzM6/8/

这是jsfiddle。

jQuery禁用选择（允许输入）

1 个答案: