JS基礎篇--JS與CSS阻止元素被選中及清除選中的方法總結

時間 2020-01-06

標籤基礎 css 阻止元素選中清除方法總結欄目 JavaScript 简体版

原文原文鏈接

有時候，咱們但願阻止用戶選中咱們指定區域的文字或內容。html

舉個栗子，有時候用戶在一個區域執行頻繁的點擊操做，一不當心傲嬌地點多了，就會選中當前區域的內容。web

再舉個栗子，製做輪播組件的時候，點擊下一頁，若點擊的快的話，瀏覽器會識別爲雙擊。segmentfault

雙擊的默認效果是選中整片區域，這時候輪播圖組件就會被表示憂鬱的藍色幕布蓋住，多憂桑啊~
瀏覽器

你看，這妹子多贊啊，但是你一緊張就亂點下一張的話，就變成醬紫了：
dom

不過別怕，給這個現代化瀏覽器說好了咱不要這種憂桑色調就能夠了：this

.pretty-girl {
    -webkit-user-select: none;     
}

但是！但是！不是每一個瀏覽器均可以不憂桑！！！那就只能請腳本大王出山了。spa

阻止選中

有時候，咱們須要禁止用戶選中一些文本區域，這時候能夠直接經過讓 onselectstart 事件 return false 來實現。即在body標籤中添加以下：code

<body onselectstart="return false">

使用 JS 阻止整個網頁的內容被選中

document.body.onselectstart = function () { 
    return false; 
};

// 或
document.body.onmousedown = function () { 
    return false; 
}

阻止特定區域的內容被選中

var elem = document.getElementById('elemId');
elem.onselectstart = function () {
    return false;
};

使用 CSS 控制樣式阻止內容被選中

僅支持IE10及以上的高版本瀏覽器。IE9 如下請使用 onselectstart="return false;" 的方式來實現。orm

.unselect {
    -webkit-user-select: none; 
    -moz-user-select: none;    
    -khtml-user-select: none;  
    -ms-user-select: none;    

    /* 如下兩個屬性目前並未支持，寫在這裏爲了減小風險 */
    -o-user-select: none;
    user-select: none;  
}

user-select: auto; => 用戶能夠選中元素中的內容htm

user-select: none; => 用戶不可選中元素中的內容

user-select: text; => 用戶能夠選中元素中的文字

目前這個 user-select 兼容 Chrome 6+、Firefox、IE 10+、Opera 15+、Safari 3.1+。

須要注意的是，這個 user-select 還帶瀏覽器廠商前綴，意味着她們仍是非標準的，未來可能會改變。在生產環境中要慎用。

清除選中

有時候用戶選中文字進行復制後，咱們使用手動的方式進行選中的清除。

先來搞懂幾個小知識點：

1.獲取選中的文字

document.selection.createRange().text; IE9如下使用
window.getSelection().toString(); 其餘瀏覽器使用

$('p').mouseup(function(){
    var txt = window.getSelection ? window.getSelection().toString() : document.selection.createRange().text;
    alert(txt) ;
})

2.取消處於選中狀態的文字

document.selection.empty(); IE9如下使用
window.getSelection().removeAllRanges(); 其餘瀏覽器使用

$('p').mouseup(function(){
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
})

3.使某Dom中的文字處於選中狀態

$('.somedom').click(function(){
    this.focus();    
    if(window.getSelection){
        var range=document.createRange();
        range.selectNodeContents(this);
        var selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);            
        }
    else if(document.selection){
        //for ie
        var range=document.body.createTextRange()
        range.moveToElementText(this)
        range.select();
    }  
})

使用JS清除選中

function clearSelections () {
    if (window.getSelection) {
        // 獲取選中
        var selection = window.getSelection();
        // 清除選中
        selection.removeAllRanges();
    } else if (document.selection && document.selection.empty) {
       // 兼容 IE8 如下，但 IE9+ 以上一樣可用
        document.selection.empty();
        // 或使用 clear() 方法
        // document.selection.clear();
    }       
}

使用CSS清除選中

不考慮低版本 IE 的狀況下，咱們簡單給選中元素添加以上 .unselect 的樣式便可。

擴展onselect 事件

定義與用法：onselect 事件會在文本框中的文本被選中時發生。

語法：onselect="SomeJavaScriptCode"
其中參數SomeJavaScriptCode爲必需。規定該事件發生時執行的 JavaScript。
支持該事件的 HTML 標籤：

<input type="text">, <textarea>

支持該事件的 JavaScript 對象：window

實例1

在本例中，當用戶試圖選擇文本框中的文本時，會顯示一個對話框：

<form>

Select text: <input type="text" value="Hello world!"
onselect="alert('You have selected some of the text.')" />
<br /><br />
Select text: <textarea cols="20" rows="5"
onselect="alert('You have selected some of the text.')">
Hello world!</textarea>

</form>

實例2

<input type="text" value="選中的內容" id="text"/>

JS方法：

var text = document.querySelector('#text');
text.addEventListener('select',function(e){
    console.log(e.target.value); //選中的內容
})

參考

MDN user-select
https://segmentfault.com/a/11...

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。