广告

jQuery有选择性的禁止文本选中

2018-8-2 16:13| 作者: antzone| 查看: 640| 评论: 0|来自: 蚂蚁部落

使用css可以实现指定元素的中的文本禁止选中效果,具体可以参阅CSS3实现的禁止文本选中代码实例一章节。

但是纯CSS方式设置不够灵活,如果能够封装成一个函数,并且能够方便的指定哪些元素中的文本不可以被选中。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css">
html,body{height:100%}
div{
  width:150px;
  height:50px;
  background:#CCC;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  (function($){
    $.fn.disableSelection=function(){
      return this.attr('unselectable','on')
      .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', false);
    };
  })(jQuery);
  $(':not(input,select,textarea)').disableSelection();
})
</script> 
</head> 
<body>
<div id="thediv">蚂蚁部落</div> 
<textarea></textarea>
</body> 
</html>

鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部