jQuery禁用选择(允许输入) [英] jQuery Disable Select (allow input)
问题描述
我有一个示例代码，用于禁用与j Query一起使用的表单上的选择文本.它适用于Firefox，Chrome和IE10.但我想允许输入框内的选择文本.对于Firefox和chrome，它工作正常，但IE不允许在输入框中选择文本.我如何允许在输入框中选择文本值.
I have a sample code for disable select text on form using with j Query. It work fine for Firefox, Chrome and IE10. But i want to allow selection text inside of input box. It work fine for Firefox, chrome but IE does not allow to selection text inside of input box. How may i allow to select text value inside of input box.
注意:我在IE10上进行了测试.
最好的问候，
Noted: i tested on IE10.
Best Regards,
<!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>
推荐答案
您的问题位于两个地方:
Your problem locates at two places:
-
'user-select'适用于一个元素及其子元素，因此您无需选择不必要的元素.(出于效率考虑)
'user-select'applies to one element and its sub-element, so you do not need to select unnecessary elements.(for the sake of efficiency)
不绑定selectstart事件，因为css属性user-select : none已禁用选择. IE会将处理程序应用于输入元素，以便您无法选择.
do not bind selectstart event because the css attribute user-select : none has disabled selection. IE will apply handler to input elements so that you cannot select.
这是jsfiddle.
here is the jsfiddle.
这篇关于jQuery禁用选择(允许输入)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
