Small bug when selecting text on focus - javascript

i have a input[type=text] containing the short url for a post. i want to select the short url so users can easily copy the short url into clipboard. i used
$(".shorturl input").focus(function() {
this.select();
});
but i noticed the 1st time it works fine then the next time it will blick (i see the text selected then deselected). it seems when like it try to select a selected text and ends up deselecting?
then to enhance this, how can i copy text to the clipboard? hopefully without flash? i see jQuery plugins to copy text but they use flash.
my site using that is http://jiewmeng.tumblr.com

Try using the click event instead. It seems to work when focusing on the input using the keyboard as well, but I haven't tested it cross-browser:
$(".shorturl input").click(function() {
this.select();
});​
Demo at http://jsfiddle.net/mZSyh/
For the second part of your question, see How to copy text to the client's clipboard using jQuery?

Related

Capture key input on select (dropdown list) in JavaScript

I'm trying to capture the input on a dropdown in JavaScript when it is focused, but it appears to not throw events.
Without using a third party library, is there anyway to capture this input?
Example: http://jsfiddle.net/m4tndtu4/11/
you don't want a third party library, but tagged your question to jquery.
you also use jquery code inside your jsfiddle, and mix it with native js...
so i assume, that you would at least want to use jquery.
i edited your fiddle the following: http://jsfiddle.net/m4tndtu4/14/
i just deleted everything you wrote, and just entered one 'on' handler:
$("#sel1").on("keyup",function(){ //this captures selection changes
$("#output").css("background-color", "yellow").text($('#sel1 option:selected').text()); // change the css of output and set the text to the value of the selected option
var enteredSearchSequence = String.fromCharCode(e.which);
$("#input").css("background-color", "yellow").text(enteredSearchSequence);
});
currently, it shows only the last pressed key - and also don't work if SHIFT was pressed... but i guess, you can figure out, how to concat the keypress or even delete it, because it's treated as a new search.
btw. given that, you may want to take a look at angularjs or any other mvc - a list and a searchbox is quite easy with those frameworks!

Select URL for copying in mobile chrome

I've been trying around for some time and searched and searched for solutions with no results so far.
The problem:
I have an URL in a webpage that I want to select as a whole to copy it from a mobile browser.
For Firefox I'm using a readonly input of type text and with the click event listener I trigger select() on the input. That works like a charm on mobile FF.
For Safari there also is a workaround which even triggers the copy-dialog on click.
With Chrome I could not manage to achieve this.
There is a Chrome issue here which says that selecting from an input wich is readonly does not work (thats still true, tested that).
By using a Label:
<label id="fileLink" type="text" class="link fakeInput" />
, a method to select the text from here and
$('#fileLink').click(function() { markieren(this) });
, I was able to select the url with a click on it. But this will not trigger the copy-dialog. By holding onto the url to copy it, it will only select a part of it and then I have to manually select the whole url to copy it.
I can't imagine, that there is no workaround for this.
To be more clear: for FF I'm using in javascript:
$('#pFileLink').append('<input id="fileLink" type="text" class="link" readonly="readonly" />');
$('#fileLink').click(function() { this.select(); });
$('#fileLink').val(url)
Has anyone an idea how to solve this for mobile chrome?
What do you mean with "will not trigger the copy-dialog"? You can't access the clipboard in Chrome so far.
You can alert the link, use a promp or a "modal box" with a input type text (not readonly) with selected text so the user can copy it.

How to make IE recognise this .change in jquery

I'm writing a jquery/javascript application. Part of what I need is a file input, which I need to look the same across Firefox, Chrome, and (ugh) IE. What I've done is made the file input hidden and placed a text box on top of it. Then, I use jquery .click to make clicking the text box have the same effect as clicking the file input, and I use .change to make the contents of the file input show up in the text box. Works fine in Firefox and Chrome, but the horrible horrible people at Microsoft want to ruin my day.
If anybody has the solution, I would be oh so grateful. Thanks in advance!
<input type="text" id="fakefile">
<input type="file" id="realfile">
$(document).ready(function(){
$('#fakefile').click(function(){
$('#realfile').click();
});
$('#realfile').change(function(){
$('#fakefile').val($('#realfile').val());
});
});
It's not possible, you can do some hackyness and add a label to the file input and trigger the click on the label not the input but as soon as you try to submit the form it will simply fail in IE.
The way I solved the problem was to turn the file input opacity to 0 and absolutely position it over the styled element I want the user to think they are clicking. This way they are in fact clicking the file input even though it appears they are clicking my styled element.
Check this:
$(document).ready(function(){
$('#fakefile').click(function(){
$('#realfile').click();
});
$('#realfile').bind("change click", function(){
$('#fakefile').val($('#realfile').val());
});
});
jsfiddle: http://jsfiddle.net/deAf6/

Call a JavaScript function when text is paste occurs in a text area

I would like the text area to call a function when a text is pasted into the text area via mouse clicks. I am not getting it to work the way I wanted using onChange.
I am aiming to build something like the Twitter tweet box.
Use the onPaste event. As far as I've tested it works for Ctrl+V pasting, and right-click>Paste pasting.
document.getElementById(<id>).onpaste= function()
{
//do something
}

Unselect textbox on blur with jQuery in IE8

I'm trying to have the default behavior of a form select (or highlight) the text when you tab to the next input. I've had to add the .select() function on my password form fields for this to work in IE8. Is there an equivalent to the jquery .select() for deselecting text?
$("#MyTextBox").focus(function() {
$(this).select();
});
$("#MyTextBox").blur(function() {
// Deselect here
});
Not that I am aware, however this ought to work for you:
$(this).val($(this).val());
Here you set the value of the field to itself. the cursor should automatically be put on the end.
The posted answer by James Wiseman worked perfectly in IE8, but for me at least, didn't work in Firefox 3.6.x.
I appreciate that the original question is specific to IE8, however, to help out those searching for a single solution that works in FF and IE, I used the following code:
var temptext = $(textbox).val();
$(textbox).val('');
$(textbox).val(temptext);
(where textbox is the textbox object to work with).
It uses the same theory as James Wiseman's solution, however, it adds the specific step of setting the textbox's text to a blank string prior to setting the textbox text back to the original string. Hope this helps!

Categories