запретить выбор внутри элемента ввода

Question

Я хочу сделать следующее

• Запретить выделение текста внутри элемента ввода
• Не показывать курсор морковь внутри входа

Я не могу просто размыть ввод при щелчке, фокус должен оставаться во вводе. Вероятно, есть способ сделать это только в IE, я, конечно, предпочел бы использовать кросс-браузерное решение, но плохо согласился бы только на IE (или FF).

Вот демонстрационная страница, где вы можете увидеть, почему мне может понадобиться эта функция:

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

Если вы нажмете на выпадающие списки в первом ряду на странице, внутри выпадающего меню вы увидите морковку, которая выглядит забавно. (это не произойдет в Chrome, но будет в FF или IE)

Answer 1

Немного хак, но:

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

Кажется, работает в Firefox (3.6.3).

Сделайте нам всем одолжение и спрячьте его от HTML, хотя (attachEvent магия) .. И никому не говорите, что я предложил это:)

Answer 2

Я использую в своем коде следующую функцию, это не 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"
}

Answer 3

Вы можете отключить выбор текста в некоторых браузерах не IE с помощью CSS-выбора пользователя.

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

Не уверен насчет IE.

Что касается эффекта, которого вы пытаетесь достичь, как насчет того, чтобы сделать ввод невидимым и иметь div в верхней части ввода, который отображает значение ввода?

Если вам нужно изменить значение на входе, событие щелчка на элементе div направит фокус на вход, а событие нажатия клавиши обновит элемент div.

Не пробовал, но похоже, что оно должно работать.

EDIT:

Используйте CSS, чтобы сделать ввод невидимым, чтобы сохранить функциональность вкладок.

(Пример предполагает, что фон #FFF)

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