disallow selection inside an input element

Question

I am looking to do the following

• Disallow text selection inside of an input element
• Do not show the cursor carrot inside of an input

i cannot simply blur the input on click, focus must remain in the input. There is probably a way to do this in just IE, i would of course rather have a cross browser solution but ill settle for IE (or FF) only solution.

Here is a demo page where you can see why i might need this functionality:

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

if you click on the dropdowns in the first row on page, you will see the carrot inside the dropdown which looks funny. (this wont happen in chrome, but will in FF or IE)

Answer 1

You can disable text selection in some non IE browsers with CSS user-select.

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

Not sure about IE.

As far as the effect you're trying to achieve, how about making the input invisible and have a div on top of the input that displays the value of the input?

If you need to change the value in the input, a click event on the div would direct focus to the input, and a keypress event would update the div.

Haven't tried it, but seems like it should work.

EDIT:

Use CSS to render the input invisible in order to retain tabbing functionality.

(Example assumes background is #FFF)

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

Answer 2

A bit hacky, but:

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

Seems to work in Firefox (3.6.3).

Do us all a favor and hide it from the HTML, though (attachEvent magic).. And don't tell anyone I suggested this :)

Answer 3

I use the following function in my code, it's not JQuery but it should be fairly easy to convert:

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