2017-09-06 69 views
0

我已經在最新的Chrome和IE11測試這之間下探文本選擇。防止拖拉和投入

這是可能選擇中的輸入的文本,然後將其拖動到另一輸入,在至少IE11和鉻。

我想避免這種情況。

我發現很多的例子/教程展示瞭如何防止相反在如何實現拖放例子:允許阻力,同時防止文本選擇。

但我想允許在鼠標拖動文本選擇 - 但防止所選文本,可拖動。

設置CSS屬性-webkit-用戶拖拽:無;也可以防止文本選擇,在那裏我會預期的屬性:-webkit-user-select:auto;將控制文本選擇的預防。

這裏是一個的jsfiddle:https://jsfiddle.net/9g419erc/

input { 
 
    -webkit-user-select: auto; 
 
    user-select: auto; 
 
    -webkit-user-drag: none; 
 
}
<article> 
 
    <input type="text" placeholder="Write text, select it, and drag"> 
 
    <input type="text" placeholder="Then drop text here"> 
 
</article>

使用CSS3只首選

+0

檢查我的答案。希望它可以幫助你。如果您覺得合適,請將其作爲答案。謝謝 – anu

+0

一個只使用css3的解決方案是首選,但是由於這是一個聰明的解決方案,我沒有想到。 – Doff3n

+1

會看到我是否可以使用css3找到任何解決方案 – anu

回答

1

添加ondrop="return false;"到要禁用下探文本的元素的溶液。

input { 
 
    -webkit-user-select: auto; 
 
    user-select: auto; 
 
    -webkit-user-drag: none; 
 
}
<article> 
 
    <input type="text" placeholder="Write text, select it, and drag" > 
 
    <input type="text" placeholder="Then drop text here" ondrop="return false;"> 
 
</article>