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;
}
精彩评论