Question

我希望做以下事情

禁止在输入元素内选择文本
不要在输入

我不能简单地模糊点击输入，焦点必须保留在输入中。在IE中可能有一种方法可以做到这一点，我当然宁愿使用跨浏览器解决方案，但不能解决IE（或FF）唯一的解决方案。

这是一个演示页面，您可以在其中了解我可能需要此功能的原因：

http://programmingdrunk.com/current-projects/dropdownReplacement/

如果你点击页面第一行的下拉列表，你会看到下拉列表中的胡萝卜看起来很有趣。（这不会发生在chrome中，但会发生在FF或IE中）

Answer 1

您可以使用CSS user-select禁用某些非IE浏览器中的文本选择。

-webkit-user-select:none; 
-k-user-select:none; 
-moz-user-select:moz-none; 
user-select:none;

不确定IE。

就你想要达到的效果而言，如何使输入不可见并在显示输入值的输入顶部有一个div？

如果你需要更改输入中的值，div上的click事件会将焦点指向输入，而keypress事件会更新div。

没试过，但似乎应该有用。

修改

使用CSS将输入呈现为不可见，以保留标签功能。

（示例假设背景为#FFF）

#myInput { border-width:0; color:#FFF; background:#FFF; outline:0; }

Answer 2

有点hacky，但是：

onclick="this.selectionStart=this.selectionEnd=-1;"
onselect="this.selectionStart=this.selectionEnd=-1;"

似乎可以在Firefox（3.6.3）中使用。

尽我们所有帮助并将其隐藏在HTML中（attachEvent魔术）..并且不要告诉任何人我建议这样做：）

Answer 3

我在我的代码中使用以下函数，它不是JQuery，但它应该很容易转换：

function disableSelection(elm) {
    // Disable the selection of `elm` - should work for all major browsers except Opera
    // which doesn't seem to allow disabling selections unless the mousedown 
    // events etc are cancelled as far as I know

    // Disable the select start event
    elm.onselectstart = function() {
        return false
    }

    // Disable in IE - see http://msdn.microsoft.com/en-us/library/ms534706(VS.85).aspx
    elm.unselectable = "on"

    // Disable in Mozilla - see https://developer.mozilla.org/en/CSS/-moz-user-select
    elm.style.MozUserSelect = 'none'

    // Disable Safari/Chrome
    // See http://help.dottoro.com/lcrlukea.php
    elm.style.webkitUserSelect = 'none'

    // Disable in other browsers
    elm.style.userSelect = 'none'

    // Display a normal cursor
    elm.style.cursor = "default"
}

禁止在输入元素内选择

3 个答案: