Selecting text in mobile Safari on iPhone - javascript

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.

Related

Populating Quick Type Bar Options on IOS Devices

I have an input type email.
<form>
E-mail:
<input type="email" name="email">
</form>
As soon as the user start typing, I would like to give them the option of most popular emails. Ex. #gmail.com ...
See the image below for details.
How would one go about and implement something like this?
Is there any plug-in or framework that help me achieve this kind of task?
Will HTML/CSS/JS have the ability to do that or only swift2 can ?
QuickType is part of the built-in iOS keyboard, and here is no way to access and/or modify it with JavaScript from a simple website. Unfortunately, you can't even detect the keyboard's height, and position some fake QuickType-like buttons over the keyboard, because the keyboard animates up from the bottom, over the current application without resizing or moving anything.
I'm afraid your only option is to add these as small buttons under the input, or maybe you can create something similar to the iOS copy/paste menu, that becomes visible, when the user starts typing in the input, and append the email endings on a click/touch.
I agree with #frzsombor, but I can think of a different workaround. It would take a lot of code though, so it might not be worth it. Anyway, what you could do is periodically take a screenshot and check for one of the colors on the keyboard in a certain position, maybe #ACB3BB (the return button color). If it is there, you could display another Quick Type Bar above the built-in one. The only problem would be if an update to iOS changes what the bar looks like, but you could always update your website. Another possible way to detect the keyboard is here. I think you need jQuery for that, though...

how to avoid the keyboard obstructing buttons

Hi all I have a window with two text fields and two buttons.When I'm on the second text field, the keyboard is in the way of the buttons. And thus, there is no way to press the buttons. I need to turn the device sideways and a 'done button' appears in my text field which, if clicked, will remove the keyboard. But in the future, I will be locking my app to portrait so I'm just wondering how to solve this issue. Is there a specific keyboard I can call which will have a button to remove the keyboard or anything like that? I'm working with titanium
As suggested, in comments above.
By placing the View inside a ScrollView will allow you to achieve this result. Then when the keyboard is shown for that view you can have the textfield scroll up so it is not covered by the keyboard. Follow this example shown here:
How to make a UITextField move up when keyboard is present?
If you don't want to use a scroll view, or want more control over the 'avoiding', use IHKeyboardAvoiding https://github.com/IdleHandsApps/IHKeyboardAvoiding
(its mine)

I want Android soft keyboard to have a "Done" button at the right moment WITHOUT JAVA

I'm aware that questions have been asked and answered about the Android soft keyboard and which buttons it shows by default, and in what circumstances, and how to modify them.
However, all the answers involve changing the Java code. Since I am writing a cross-platform app using Phonegap and jQueryMobile, I'd like to stay away from learning Java.
My problem is this:
I have a form with (in this order, in abbreviated html):
<form action='javascript:processSubmit()'>
<select id='expenseType'/>
<input type='text' id='expenseAmount'/>
<select id='expenseDate'/>
<button type='submit'/>
</form>
What currently happens is that the soft keyboard will appear once I press the text input field. So far so good. The button in the bottom right corner of the soft keyboard says 'Next'. But pressing it does not shift the focus to the next form field. And when the user has clicked on the second select and picked a value, the keyboard button does not change to 'Done'.
Is there not a way to give the fields some special html attribute to make the magic happen?
Or a Javascript way to change the softkeyboard?
AFAIK, there is no way from JavaScript or HTML to affect the behavior of the Android soft keyboard.
I know that is a very old question, but with this plugin https://github.com/driftyco/ionic-plugin-keyboard you can change this behaviour with the Keyboard.hideKeyboardAccessoryBar method

Javascript quick question: How to edit textarea properties when user clicks away

EDIT: onblur worked! Thanks!! :D
A good example of this is facebook.com. When you click on the comment box the textarea size increases and the text "Write a comment" is removed. That I already know how to do.
The problem that arises for me is when a user (me) clicks away from that container div, the textarea goes back to the original settings.
What javascript method am I looking for?
You are looking for the blur method.
Here is an example (using jQuery):
http://jsfiddle.net/c747a/
And one without jQuery (although I would use jQuery):
http://jsfiddle.net/kxW3G/

jQuery Facebox delay

I need a very FAST and lightweight jquery based Modal box on my site, I am looking at Facebox http://famspam.com/facebox
It is a nice plugin and it seems fast and lightweight but I think I can still strip out some of the features I do not need. For example I do not need it to use regex and find photos, so I have removed that part of the code, also I do not want the box to close whenever you click anywhere or the escape key. I have this partially done, I removed the code that makes the escape key close the box but I have not figured out how to make it only close programaticly or when clicking the close button only, right now it closes on any click outside of the box.
Now I have one issue I have not been able to figure out yet, there appears to be 2 spots in the code that control the delay of fading the box in and out, they were set at 200 and I changed them to 0 and tried several other number combinations but I can not seem to get the speed to be faster (less delay).
Does anyone know how to remove the delay in opening a facebox? Also how to disable it from closing when you click anywhere outside of the box?
To disable closing it from clicking anywhere outside,
you can find something called "overlay : true"
change it to "overlay : false,"
To close it with-out delay, You can find something like '$(document).bind('close.facebox', function() {'
there, change
"$('#facebox').fadeOut(function() {"
to
"$('#facebox').hide(function() {"
I use the thickbox for one project, pretty fast. Check also this list. I recommend you to keep the closing by clicking outside the box option, a real help for users.
Instead of hacking facebox, I would try something more configurable.
I've used jqModal to create modal boxes, which display instantly, can't be closed except when certain conditions are met, etc

Categories

Resources