Develop Reference

Copy to clipboard using javascript programatically (testing)

I've got a script that deals with pasted text in a text area. I would like to write some tests for it. The first step would be to copy some text in the clipboard so after reading a lot about the topic I ended up with something like this:
Add a text Area to the DOM with the text you want to copy.
Add a button to the DOM that runs document.execCommant("copy") on click.
Remove the text area & the button from the DOM.
Please take into account before marking this question as a duplicate, that all the other solutions I've seen involve the user performing the click action. I am asking about how to do this strictly programmatically.
document.execCommant("copy") does not work if it's not triggered by any user action due to security reasons. In my case, the tests are clicking on the button, but document.execCommant("copy") simply won't work.
Is there any way of doing this without using any new libraries? (jQuery is fine).
I am interested in a solution that works on Chrome/Firefox.
Here you can see a fiddle with the step I mentioned above: https://jsfiddle.net/7b40ma0q/

I need a dropdown text box in Javascript (jQuery?)

I have to make a page with a huge table of data, and it has to be editable.
The problem is, some of the fields are supposed to be very long (hundreds of characters), and I need some sort of way to enter this text without disrupting the table's layout, but showing the users the entire text while they're typing.
A good solution would be something that looks just like a vanilla 1-line text box which, when clicked, slides out, pretty much like a <select>, lets the user type in all the text he wants, and then shrinks back to text box size when the user clicks away.
I'm sure there must be something like that for jQuery, but I just can't find it.
Here's how it should act:

Here's what I figured out playing around with some javascript
http://jsfiddle.net/bsWy6/
You can mess with the styling until it is exactly what you want. I think it's pretty close to what you're looking for though.
I am assuming you are populating your table from a database? If that's true, I would use php to generate the id's so that you don't have to type them for every single row, since your functions need to know the exact cell it's working with. If you want help with that code too, just let me know and I'll post it up here. I'm just not sure if you've done anything with php, so I don't want to go into all of it if you don't want it.
Good luck!

I think NicEditor will fit the need. See their inline editing demo.

For each cell, make two fields:
<td id="td-1-2">
<p id="p-1-2">Some text to...</p>
<textarea id="ta-1-2">Some text to...</textarea>
</td>
Then hide the <textarea> and show the <p>. When the user clicks the <p> then hide the <p> and show the <textarea>. Either put a submit button below the textarea or save its contents when it looses focus.

Chrome's Console Autocomplete

has anyone ever seem an autocomplete solution in JS that works like Chrome's Console? (I think this is in version 17+)
I am trying to build something using jQuery, but I can't imagine how the autocomplete placeholder that stays below the active text follows the cursor.
All the autocomplete thing, the search, sort, etc... I've already done, I just need a way that the placeholder follows the cursor. Thanks.

Well, why not to use a text box and to call function on any key press/key down. Then the function will read the text that is currently enter and check your data structure for possible end of the word.
You can sort the possible answer and to write the first one for example with other color. If the user press space or enter to color the whore world with black, and if it is press tab to switch with other possible answer...
Do you mean this?I can write some code to show you want I mean if this is what you need?

jquery change method to trigger hidden file input

I have created a fake file input using an anchor tag and placed a hidden file input beside this, I want to use jquery to add a click event to the anchor tag that triggers the activation of the hidden input box but Im not completely sure how to achieve this, if anyone could give me some advice that would be great.
Here is my current effort http://jsfiddle.net/kyllle/CdXP9/
I guess Im probably way off with this one, would love some advice on how this can be achieved though
Kyle

http://jsfiddle.net/CdXP9/6/
$('#upload').css("visibility", "hidden");
$('#fakeUpload').click(function(e) {
e.preventDefault();
$('#upload').trigger('click');
});

I cannot say for certain that it isn't possible, but js code to automatically upload a file is very much frowned on, and deliberately made difficult. So I think you are probably on a hiding to nothing with this.

Use the click function it will open the browse window- if that's what you want- see http://jsfiddle.net/CdXP9/5/

Selecting text in mobile Safari on iPhone

I'm trying to make it easy for an iphone user to copy some text to the clipboard in mobile safari. As in the usual "touch-hold-copy". There is a specific bit of text I want to a user to copy. I have full choice of the html markup in which to wrap the text. How can I make it easy, rather than abitrary? For instance:
Is there a way to "select all" the text upon touch-down using javascript? Then a user could just continue to touch-hold and then choose copy?
Is there a way to bring up the "select all" option? Like you can when typing in a text box? After which they can choose copy?
If there's no javascript solution, how can I arrange the html to help Safari select the right bit of text easily? As opposed to just a word, or a wrapping div?
I've tried onFocus="this.select()" for various elements, none seem to work. Also tried onClick.
Those who have tried to port a site that uses ZeroClipboard to the iPhone might have some ideas.
Cheers

instead of this.select(); I used the following and it worked!
this.selectionStart=0;
this.selectionEnd=this.value.length;

The magic sauce for me was the combination of these three:
onFocus="this.selectionStart=0; this.selectionEnd=this.value.length;" <!-- for big screens -->
onTouchEnd="this.selectionStart=0; this.selectionEnd=this.value.length;" <!-- for small screens -->
onMouseUp="return false" <!-- to stop the jitters -->

Try ontouchstart instead of onfocus. Onfocus fires approx. 500ms after ontouchend, same as onclick, onmousedown, and onmouseup. See https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW7 for more details on mouse events.

I have run into the same problem. The onfocus event is the right one to trap (ontouchstart isn't triggered if you use the iphone keyboard [next]/[prev] buttons.) If you put an alert(); in your onfocus="" handler, you'll see the alert box pop up. The problem is this.select(); I still haven't found an answer to this, but when/if I do, I'll post it here.