0

I tried disabling text selection using JQuery. It's working fine in Firefox but not in IE. I have a text input field with an id, say 123. For this element the text filled in should not be allowed for selection. Can anyone provide me with sample code? I am using IE 6.

Dilip B S
  • 203
  • 6
  • 15
  • 2
    but you can still enter text ? please show us what you have working so far ... might help – Manse Nov 07 '11 at 14:44
  • 1
    Please post the code you are using to disable the input field... – El Ronnoco Nov 07 '11 at 14:44
  • 1
    i know id 123 is probably just an example, but it's not a valid id :P – jbabey Nov 07 '11 at 14:45
  • 2
    I feel that it would take less effort to upgrade every computer using IE6 still than to build a website that works fully with IE6...just sayin'. – Trevor Arjeski Nov 07 '11 at 14:48
  • @jbabey: numeric-only IDs have had complete browser support for many years and are entirely valid according to the HTML 5 working draft spec. – Andy E Nov 07 '11 at 14:48
  • if($.browser.mozilla) { $("#123").css('MozUserSelect','none'); } This is what i am using for disabling text selection in firefox. – Dilip B S Nov 07 '11 at 14:50
  • @AndyE does IE6 support HTML5?? – jbabey Nov 07 '11 at 14:50
  • 1
    IE6 hardly even supports HTML 4... – Igor Nov 07 '11 at 14:52
  • My project has a requirement that it has to work in IE6 too. Any help?? – Dilip B S Nov 07 '11 at 14:55
  • @jbabey: nope but you missed the first part of my answer where I said browsers have supported numeric-only IDs for many years. IE 6 and lower included. – Andy E Nov 07 '11 at 15:05
  • @Dilip: you can actually do this without JavaScript in IE 6, Opera and browsers supporting the CSS3 `user-select` property. See my answer for more information. – Andy E Nov 07 '11 at 15:06

2 Answers2

8

Take a look one of IE's proprietary, cancellable events, onselectstart.

$("#123").bind("selectstart", function (evt) {
    evt.preventDefault();
});

Working example (requires IE 6-10): http://jsfiddle.net/AndyE/Cp76b/

Combine this handler with your current solution. Note that some browsers can disable user selection via the CSS3 user-select property or the unselectable (IE, Opera only) attribute. For example:

<input type="text" id="123" unselectable="on">

#123 { 
    -webkit-user-select: none; 
    -moz-user-select: none;
    -ms-user-select: none;
}

Working example updated: http://jsfiddle.net/AndyE/Cp76b/2

This makes the JavaScript solution redundant in those browsers, but gives the advantage of disabling the selection for those users that have JS disabled.

Tim Down
  • 318,141
  • 75
  • 454
  • 536
Andy E
  • 338,112
  • 86
  • 474
  • 445
  • Yep thanks. your answer was helpful. I tried it and its working fine now... J – Dilip B S Nov 07 '11 at 15:10
  • 1
    I'm pretty certain `-o-user-select` doesn't exist. Opera uses IE's `unselectable` attribute. +1 anyway. – Tim Down Nov 07 '11 at 16:08
  • @TimDown: that's right. IE 10 doesn't currently support `-ms-user-select` either, unless it's in the Windows Developer Preview build. I figured it couldn't hurt to add them to the list, though. I expect support for them will be added in the near future. – Andy E Nov 07 '11 at 17:18
  • @AndyE: Don't count on it. `user-select` isn't in the current CSS 3 spec, and Opera and IE already have a working alternative (`unselectable`). – Tim Down Nov 12 '11 at 16:18
  • @TimDown: did they remove it from the spec? It *is* in [the user interface module from 2000](http://www.w3.org/TR/2000/WD-css3-userint-20000216), but it's not in any of the newer documents that superseded that one. I wonder why. – Andy E Nov 12 '11 at 20:42
  • 1
    @AndyE: I don't really know what happened to it. Possibly it was seen by the powers that be as behaviour rather than styling and therefore inappropriate for CSS, but that's just a guess. – Tim Down Nov 13 '11 at 00:00
  • `-ms-user-select` is included in more recent IE 10 builds, so I added it to your answer. Hope that's OK. – Tim Down Jul 22 '12 at 16:14
2

Try this: I don't have IE6, but this works for IE7 at least

   $("#123").bind( "selectstart", function(e){
    e.preventDefault();
    return false;
    });
Esailija
  • 138,174
  • 23
  • 272
  • 326