jQuery有選擇性的禁止文字選中

antzone發表於2018-08-02
jQuery

使用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>

相關文章