1

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>
4

1 に答える 1

0

問題は次の 2 か所にあります。

  1. 'user-select'1 つの要素とそのサブ要素に適用されるため、不要な要素を選択する必要はありません (効率のため)。

  2. selectstartcss 属性user-select : noneが選択を無効にしているため、イベントをバインドしないでください。IE は入力要素にハンドラーを適用するため、選択できません。

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

ここにjsfiddleがあります。

于 2013-08-10T14:04:20.840 に答える