disallow selection inside an input element

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 th开发者_开发技巧e 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)

---

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 :)

---

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

---

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