выбор Disallow внутри входного элемента

Question

Ищу сделать следующее

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

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

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

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

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

Answer 1

Немного Hacky, но:

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

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

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

Answer 2

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

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

Не уверен в IE.

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

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

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

РЕДАКТИРОВАТЬ:

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

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

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

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" 
}