I have a div in my website, and when it's clicked upon, it reveals the search box (done with jQuery).
However, I would like this div to accept drag'n'dropped text. In my use case, a user selects regular text from anywhere on the site, and drag'n'drops it to copy-paste it into the search box.
If the search box was always visible, he could simply drop it into the text box, handled natively by the browser/OS. However, is there a way I could simulate the same thing with this div? The user would drop his text onto the div, and it would fire the click event to show the text box and paste the dropped text into the box.
My website is uses Modernizr+jQuery+jQuery UI and HTML5/CSS3. IE6 compatibility is a non-issue.
Thank you in advance!
You can use the HTML5 Drag and Drop events:
$('#dropTextHere').bind('drop', function (e) {
var theDroppedText = e.originalEvent.dataTransfer.getData('Text');
});
You can read more about it here.
Related
A page I am testing is built with react. On the page I have checkboxes and text areas. Now I am trying to use the Chrome plugin Autofill in order to populate the fields. The check box selection remains after I click on NEXT button (to go to next page) but the numbers that are written to the text areas disappear!
Anyone that has any ideas on what this could be?
I use simple javascript code that populates the text field and that works fine, I see the text but it seems like the page does not recognize it is populated when I click on Next button:
document.getElementsByName("price")[0].value=123456
I have also tried with
document.getElementsByName("price")[0].value="2500123"
Both lines populate the text area correctly but it disappears.
It is the same behaviour even if I use that javascript in F12. Still the text will dissapear when I have click on Next button. But not the check box selection!
When I enter 123456 manually I can continue with Next button.
All input is appreciated.
I have a form with a few text fields followed by a couple of radio buttons formatted inside a JQM control group. When a user types in the text box, the phone's default keyboard appears (as it should). But when the user clicks on the first radio control group (and presumably the text box looses focus) the keyboard remains visible. Is there a way to hide it?
Try it like,
// you can make a common class and use it as selector
$('input[type="radio"]').on("click",function(){
$('input').blur();// trigger blur event from all inputs.
});
Hope this will work for you.
I am developing a chrome extensions, so that this plugin used to send the selected text from a site to a server and return the text back to client.
How can I make my plugin to float on the site, once the user select any text then my plugin must appear beside the selected text (Bubble), exactly like google translation plugin, which appears immediately when a user select some text.
I attached some picture to explain what I want exactly!
You can read out the current element where you select the text and from there you can put your icon with some distance.
Here you can find out how to get the current element:
How can I get the DOM element which contains the current selection?
With jQuery, you can easily put your icon next to the start of the selection. I have not tried id but this is how I would do that.
I am trying to get a checkbox with a label to function so that when you have text selected in a contenteditable div, clicking on the label will not lose the selection from the div. The label still needs to apply the standard checkbox tick/untick upon clicking it, but keep the focus & selection intack on the div.
Doing a simple focus() on the div won't help as the selection will be gone (and caret is at the beginning). I could of course look into a way for storing the selection object and trying to assign it back after the label click, but isn't there any simpler way of keeping the selection?
(the reason I need to do this with label & checkbox is because I will be using jQuery UI buttons and I will need the the toggle functionality of them)
On a similar note, if you click the checkbox, you usually still keep the selection in the div, but at least on FF4, if you press the checkbox very frequently (<1s), it will lose the selection. Any idea what's going on there? answered below
example: http://jsfiddle.net/niklasvh/gULM9/
It's a Firefox bug marked 490367.
According to the bug description, double-click functionality on input fields will act unusually when there is a contenteditable div on the page.
I noticed the strange behavior while trying to replicate it manually so I guessed it was a bug. I don't know of any workarounds.
I've got a GWT application that displays largely text spans. I'd like to programatically select all of the text currently in the browser window (similar to pressing from the browser menu).
Can anybody give me a pointer to this?
cheers,
Ian
The select all function is not available for the entire DOM, however there is a selectAll message for TextBoxBase, so what is commonly used for large quantities of text where you automatically want to do a select all is to put the text inside a TextArea. If you don't like the look you can remove the borders from the text area and set it to read-only so that it would appear as just plain text.