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.
Related
I'm trying to add auto focus to a form. I have it working in Chrome but cannot get it working in Firefox with the below code. I think the reason could potentially be that it needs to be just autofocus rather than autofocus="autofocus". Would I be correct in assuming this? If so is there some way I can add it? I'm using a framework called SilverStripe and don't have direct access to editing the input field as it's done dynamically so would need to do it via JavaScript most likely.
<input type="text" name="Search" class="form-control search-form" id="TemplateSearchForm_SearchForm_Search" placeholder="Search..." autofocus="autofocus">
Note I am initially hiding the input box and displaying on the click of an icon by adding a class:
jQuery('.search').click(function () {
if(jQuery('.search-btn').hasClass('fa-search')){
jQuery('.search-open').fadeIn(500);
} else {
jQuery('.search-open').fadeOut(500);
}
});
I couldn't find anything in the HTML specification to validate the autofocus behavior exhibited by Chrome. Here's an excerpt from the spec on this behavior.
From 4.10.19.7 Autofocusing a form control: the autofocus attribute:
When an element with the autofocus attribute specified is inserted into a document, user agents should run the following steps:
[...]
Note: This handles the automatic focusing during document load.
It doesn't mention anything about applying this behavior when the display state changes (as Chrome is apparently doing), only when the element is first inserted into the DOM. This actually appears to a be a bug in Chrome as Firefox is following the HTML spec.
Instead of using the autofocus attribute, you will have to trigger the focus through JavaScript.
You could use JavaScript to automatically focus into any elements with autofocus='yes'
$('[autofocus="yes"], [autofocus="autofocus"], [autofocus="true"]').focus();
This should, theoretically target any elements that have autofocus set to either true, yes, or autofocus and focus on them.
Situation 1
Why is the placeholder selectable in a deactivated input[type="text"]?
<input name="minMax2" disabled="disabled" id="minMax2" type="text"
placeholder="min. 100 / max. 200" min="100" max="200">
Situation 2
I've even have a weird situation where I can type text into the placeholder but this does happens if I click into a text field which is deactivated but because I've left another field and an attached change event did enable the datepicker.
Any idea? Did I miss something or is this a bug of Internet Explorer 10 and 11?
Looks like this is a browser behavior. As an alternative you can keep it enabled (style it appropriately as disabled if needed) and add attribute onfocus="this.blur()"
Here's your demo modified: http://jsfiddle.net/a8ezd/1/
I made a few changes to your jsfiddle from what I understand to be your problem. In your jsfiddle you included jQuery so I thought I would add to your script. I have just changed how you have declared disabled in your input and also made a change to your script so that it now removes the disabled attribute on focus.
$('#test3').prop("disabled", false).focus();
http://jsfiddle.net/a8ezd/3/
If you want to go further and make it so that the user can't even select the placeholder slightly when it's e.g. disabled then you could alter the user select in the css by adding the following with the appropriate browser prefix:
user-select:none;
Example of that here:
http://jsfiddle.net/a8ezd/4/
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/
Ok so I have an input element of type file and id "test"
When I put in the address bar: javascript: document.getElementById("test").click() it brings up the open file dialog so the user can decide what to upload. However if this same exact line is inserted into the document or done in the console of chrome it does not bring up the open file dialog. In fact the console says that the click() function is undefined. Is there any way in chrome to do this?
Cause it seem to work fine for any of the other browsers
You should wrap file-input element to other (ex.:div):
HTTM:
<div>
<input type='file'>
<div>
CSS:
div{
height:1px;
overflow: hidden;
}
JS:
$('div input').click();
Good luck...
I had the same problem and managed to solve it(though I am using jQuery). I detailed the technique in another question
Jquery trigger file input
The idea was essentially to focus the file input before triggering the click programatically.
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?