can't select text in textarea in IE - javascript

I've got a couple of cases where I use a textarea to display some source code for database queries. The idea is to allow the user to select all the text in the textarea so they can copy that code and paste it some where else. All is good and well except in IE-{8,9} which are the only two IE browsers I care about.
The selection works fine for one textarea and not for the other. I've racked my brain over this for hours with no luck. I've tried to reproduce this in a tiny code snippet to illustrate the problem but that hasn't worked either.
So to go at it another direction is there a way to disable selecting text from a textarea that is IE specific and doesn't require specific javascript code? I'm not writing any specific code to disable the selection of text in a textarea.
for example if I have this textarea
<textarea>Some Text</textarea>
How might that text be unselectable in IE only? I've also tried selecting the text programatically using jquery, javascript, and DOM api. Which works in all browsers except IE-{8,9}.
Just for example.
$('textarea').select();
I've pondered the idea that some event listeners are not present, but since the IE developer tools sooo amazing I haven't had any luck tracking those down comparing what's listed in Chrome.
I've also reset IE and ensured copy 'drag and drop or copy and paste' is enabled.
I would chalk it up as a browser bug and write my own but since it work in one case and not the other it seems like something happening in the background I'm not seeing.

Yo can't refer to the textarea like this. You must use an id.
<textarea id="foo">Some Text</textarea>
<script type="text/javascript">
$('#foo').select();
</script>
​

Select by ID works perfectly fine for me:
jsfiddle link

Well as it turns out there was a mixin that was overriding the onselectstart method.
if (typeof self.node.onselectstart !== 'undefined') {
self.node.onselectstart = function() {
return false;
};
}

Related

Firefox contenteditable image selected after drop - can't remove selection

If you drag-and-drop around an image in Firefox in a contenteditable area, sometimes the images will end up being selected like this:
Fiddle here: http://jsfiddle.net/zupa/qg5Qh/
You may need to drag-drop it a few times, I have this bug in like 20+% of the time.
I am using Firefox 13.0.1 on Windows 7
How to remove that selection? Any help is appreciated.
Ps:
It is not available as a range via document.getselection().getRangeAt(..)
Firefox does NOT add any HTML attributes, still if I hit save (custom CMS), and reload the page in contenteditable mode, the selection comes back. Seems to be an annoying bug.
It does it reliably when the image is within a word that is marked by Firefox as a spelling error. For example, here's your jsFiddle with the image moved into the middle of the word "Lorem": http://jsfiddle.net/timdown/qg5Qh/1/
It seems to be something to do with the styling applied to misspelled words. Add the word "Lorem" to the browser's dictionary and the image styling goes away.
You could switch spellchecking off using the spellcheck attribute. From what I can gather, you have to do this at the <body> level in Firefox because it doesn't seem to work on single contenteditable elements as it does for textareas.
Demo: http://jsfiddle.net/timdown/qg5Qh/2/

How do you get the selected items from a dragstart event in Chrome? Is dataTransfer.getData broken?

I am part of a team that works on a Java application that, among other things, helps people organize and annotate information from the web. We currently use a Firefox plug-in that attaches a container attribute that contains a document source, which allows dragged text to become cited automatically. This will not always result in getting the source document because only text is transferred when a selection does not cross html tags. e.g.
<p container="http://www.somesite.com/blah.html">this is text from a site</p><p container="http://www.somesite.com/blah.html">this is more text from a site</p>
So if only is text is selected, the html tags are never crossed and the browser thinks the surround tag information and its container attribute would be unwanted; so it ignores it.
So I decided to make a Chrome extension that would exploit some of the nifty features of HTML5 to make any drag from a browser page that is dropped into out Java application include the source document. FYI, Chrome extensions are Javascript based.
The correct for thing to do, it seems, is to register a dragstart event on the document that will allow me to access the content of the drag and also let me inject a meta tag that includes the source document location.
According to the current standard, http://dev.w3.org/html5/spec/Overview.html#the-datatransfer-interface , this should be possible by using the dataTransfer interface.
So, I register the dragstart event that should give me the dataTransfer event information. You can copy and paste this code into Chrome's Javascript console to see it for yourself:
window.addEventListener("dragstart", function(event) {
console.log(event.dataTransfer.types);
console.log(event.dataTransfer.getData("Text")); });
Then select something and drag it. In Chrome, the output is "null" then "undefined". If you paste the same code into Firebug's Javascript console then drag some text that you select, the out put is what you would expect:
DOMStringList { 0="text/_moz_htmlcontext", 1="text/_moz_htmlinfo", 2="text/html", more...}
whatever text was selected
Curiously, one can use setData on the event.dataTransfer to change what is dropped. That part seems to work as expected. Paste this instead into the Chrome Javascript console, then select something and drag it to a text editor or your search box:
window.addEventListener("dragstart", function(event) {
event.dataTransfer.setData("Text","I made this here for you!");
});
It looks like it's broken. :( Does anyone have a workaround or some insight into this issue? I really want this to work in Chrome because I like its extension architecture.
Thanks!
WebKit, and hence Chrome, is quite restrictive on when you can call getData. You're not allowed to do it inside dragstart or dragover. I think this is the canonical bug.
Paste this line before the error line:
event.dataTransfer = event.originalEvent.dataTransfer;
This worked for me.

Copy and paste the selected text to the clipboard using JavaScript

I'm building a custom right-click menu for my system and I need to know how can I make a JavaScript function to copy the selected text, basically 100% like the original right-click menu does.
I'm aware of the Flash work-arounds. I want to do this in JavaScript.
Every answer I've seen so far is only a half-answer because none of them explains how to make a copy button for the selected text - all what they do is copy a pre-defined text or a text from a textbox.
Modern Day Browsers block access to the clipboard. The user has to have the security setting correct.
There are flash work-arounds, but they are not the best.
For non-IE browsers you will most likely have to use a flash solution. For IE, however, this method works perfectly:
function copyToClipboard(s) { //only works in IE :(
if (window.clipboardData && clipboardData.setData) {
clipboardData.setData('text', s);
}
}
no idea if this will work, but a google search yielded:
function getSel(){
var w=window,d=document,gS='getSelection';
return (''+(w[gS]?w[gS]():d[gS]?d[gS]):d.selection.createRange().text)).replace(/(^\s+|\s+$)/g,'');
}
http://snippets.dzone.com/posts/show/2914
A workable cross-browser approach (minus iOS) would be to use ExternalInterface and setClipboard.
So you would have a swf, flash file, that only listens to a function you call from Javascript to set the clipBoard.

firebug and _moz_dirty

I am developing Javascript app that will wrap every line of text entered inside iframe (designmode) with P (or div) like it happens by default in IE.
For now I am not pasting my code because I just started, the first problem is when i type some text in firefox and even before I click enter or calling any function firebug inserts
<br _moz_dirty="">
under the entered text.
Why? How can I prevent it?
If you still need my code please tell.
As the _moz_-prefix suggests, this is a Mozilla-internal property. It isn't inserted by Firebug, but rather by the core editor functionality in Gecko. You can't prevent it; ignore it or work around it.
#myEditableDiv br {display:none;}
It's something Mozilla uses to prevent empty containers collapsing and occasionally inserts at seemingly random times too.
The question is, if they knew it was a dirty hack then why did they do it?
The _moz_dirty attribute is used to indicate that the node needs to be pretty-printed when the document is saved, although it shouldn't appear in web pages, only in SeaMonkey Composer and SeaMonkey and Thunderbird's HTML Message Compose.
The Gecko editor used to put it there because it needed it to give it somewhere to put the cursor. I believe this is fixed in Firefox 4.

Disabling IE8 accelerators for an entire site

(Yes, I know there is a similar question on SO, but it's 8 months old -- since then IE8 RTM has come out -- and not very illuminating)
Is it possible to disable IE8's 'Accelerators' on my site? When highlighting text, I have a small popup box that appears beside the cursor (similar to Office 2007) which is being obstructed by them.
I understand there's a method of disabling highlighting on specific elements of the site using jQuery, but this isn't ideal as I need to preserve the highlighting.
Note: I am not asking how to disable IE8 accelerators on my local copy of Internet Explorer. Instead, I would like accelerators to not appear when anyone visits my site using IE8.
Sorry, this is deliberately not supported.
Please see http://blogs.msdn.com/ieinternals/archive/2009/06/03/slowing-down-disabling-accelerators.aspx for discussion on this topic.
You can mark the parent element as either contentEditable (http://msdn.microsoft.com/en-us/library/ms537837(VS.85).aspx) or as unselectable (http://msdn.microsoft.com/en-us/library/ms537840(VS.85).aspx)
Either one should prevent the accelerator button from appearing.
You could prevent highlighting on the section. Then wrap the selection that would have been highlighted in a span that has some CSS applied to it, mimicking the highlight. It might take a bit of work, but it would achieve your goals.
As someone says, wrap around selection with some span (ex. span class='selected' - to retrive it latter), and delete the selection with:
if (document.selection)//ie -> prevent showing the accelerator menu
{
document.selection.empty();
}

Categories