To make a phone call via HTML on an iPhone I create an <A/> tag with an href formatted as: <a href='tel:123-555-1212'>Dial Me</a>.
Is there an equivelant for HTML on Android?
CLARIFICATION - using the format href='tele:123-555-1212' does indeed work on on android. I was testing the app within a native Java wrapper on the device. It does not appear as if we can make a call from a web application hosted in a Native Wrapper.
Yes you can; it works on Android too:
tel: phone_number
Calls the entered
phone number. Valid telephone numbers
as defined in the IETF RFC 3966 are
accepted. Valid examples include the
following:
* tel:2125551212
* tel: (212) 555 1212
The Android browser uses the Phone app to handle the “tel” scheme, as defined by RFC 3966.
Clicking a link like:
2125551212
on Android will bring up the Phone app and pre-enter the digits for 2125551212 without autodialing.
Have a look to RFC3966
I have just written an app which can make a call from a web page - I don't know if this is any use to you, but I include anyway:
in your onCreate you'll need to use a webview and assign a WebViewClient, as below:
browser = (WebView) findViewById(R.id.webkit);
browser.setWebViewClient(new InternalWebViewClient());
then handle the click on a phone number like this:
private class InternalWebViewClient extends WebViewClient {
#Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url.indexOf("tel:") > -1) {
startActivity(new Intent(Intent.ACTION_DIAL, Uri.parse(url)));
return true;
} else {
return false;
}
}
}
Let me know if you need more pointers.
Generally on Android, if you simply display the phone number, and the user taps on it, it will pull it up in the dialer. So, you could simply do
For more information, call us at <b>416-555-1234</b>
When the user taps on the bold part, since it's formatted like a phone number, the dialer will pop up, and show 4165551234 in the phone number field. The user then just has to hit the call button.
You might be able to do
For more information, call us at <a href='tel:416-555-1234'>416-555-1234</a>
to cover both devices, but I'm not sure how well this would work. I'll give it a try shortly and let you know.
EDIT:
I just gave this a try on my HTC Magic running a rooted Rogers 1.5 with SenseUI:
For more information, call us at <a href='tel:416-555-1234'>416-555-1234</a><br />
<br />
Call at <a href='tel:416-555-1234'>our number</a>
<br />
<br />
<a href='416-555-1234'>Blah</a>
<br />
<br />
For more info, call <b>416-555-1234</b>
The first one, surrounding with the link and printing the phone number, worked perfectly. Pulled up the dialer with the hyphens and all. The second, saying our number with the link, worked exactly the same. This means that using <a href='tel:xxx-xxx-xxxx'> should work across the board, but I wouldn't suggest taking my one test as conclusive.
Linking straight to the number did the expected: Tried to pull up the nonexistent file from the server.
The last one did as I mentioned above, and pulled up the dialer, but without the nice formatting hyphens.
Related
I need to implement an accessibility feature of Voiceover(ios) or talkback(android) in React-native webview for both android and ios.
I am facing two issues:
1: I have div's and paragraphs (p tag) whose content has been read out by device. But I need to add some string as prefix or postfix in those.
Example
code is: <div> Hey Tap me to see magic </div>
Spoken content needed: 1 element of list "Hey Tap me to see magic" click to perform xyz action
.
2: Whenever action happen (i.e. on double tap of element) Device should speak:
"Magic has happened"
What I have tried
I have tried using speechSynthesis of HTML% Text to Speech:
var msg = new SpeechSynthesisUtterance('Hello World');
window.speechSynthesis.speak(msg);
This approach is working for my 2nd issue in ios (iphone X),
But No response in android devices
Thanks
I'm writing an app with Phonegap and I have a register form that is sent through ajax. It works fine when you hit the register button and execute the formcheck() function. However, when I hit the GO button from my android phone it submits the form instead of going through the formcheck() process. I tried:
<form id="RegForm" onsubmit="formcheck();return false;">
My form has no proper submit button but a button like this:
<input type="button" id="submitbtn" onclick="formcheck()"/>
I also tried to create a new OnSubmitForm() function that calls the formcheck() one but with no avail. Thank you for helping.
Found it!
1) Add this to the JS section:
$(document).ready(function() {
$("#YourFormName").submit(function() {
FormCheck();
return false;
});
});
function FormCheck() {
... validation process here ...
}
2) Make sure to include a Submit button in your form .. ( <input type="submit" )
Hope it'll help others so my 5 hour trying & testing time won't go wasted :)
Simply ensure your form tag is:
<form type='submit' onsubmit='return false;'></form>
This makes the submit action not do anything.
If you also need to hide the keyboard refer to How can I hide the Android keyboard using JavaScript?. A simple onsubmit='hideKeyboard(); return false;' will take care of this.
I've seen/heard all about disabling text selection with the variations of user-select, but none of those are working for the problem I'm having. On Android (and I presume on iPhone), if you tap-and-hold on text, it highlights it and brings up little flags to drag and select text. I need to disable those (see image):
I've tried -webkit-touch-callout to no avail, and even tried things like $('body').on('select',function(e){e.preventDefault();return;}); to no avail. And the cheap tricks like ::selection:rgba(0,0,0,0); won't work either, as hiding these won't help - selection still happens and it disrupts the UI. Plus I'm guessing those flags would still be there.
Any thoughts would be great. Thanks!
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
This will disable it for every browser going.
Reference:
jsFiddle Demo with Plugin
The above jsFiddle Demo I made uses a Plugin to allow you to prevent any block of text from being selected in Android or iOS devices (along with desktop browsers too).
It's easy to use and here is the sample markup once the jQuery plugin is installed.
Sample HTML:
<p class="notSelectable">This text is not selectable</p>
<p> This text is selectable</p>
Sample jQuery:
$(document).ready(function(){
$('.notSelectable').disableSelection();
});
Plugin code:
$.fn.extend({
disableSelection: function() {
this.each(function() {
this.onselectstart = function() {
return false;
};
this.unselectable = "on";
$(this).css('-moz-user-select', 'none');
$(this).css('-webkit-user-select', 'none');
});
return this;
}
});
Per your message comment: I still need to be able to trigger events (notably, touchstart, touchmove, and touchend) on the elements.
I would simply would use a wrapper that is not affected by this plugin, yet it's text-contents are protected using this plugin.
To allow interaction with a link in a block of text, you can use span tags for all but the link and add class name .notSelected for those span tags only, thus preserving selection and interaction of the anchors link.
Status Update: This updated jsFiddle confirms you concern that perhaps other functions may not work when text-selection is disabled. Shown in this updated jsFiddle is jQuery Click Event listener that will fire a Browser Alert for when the Bold Text is clicked on, even if that Bold Text is not text-selectable.
-webkit-user-select:none; wasn't supported on Android until 4.1 (sorry).
I have an application showing a WebView which shows information that includes street addresses like "123 Main St., Citytown, NY". However, when any of these addresses are tapped, it highlights briefly and the usual browser behavior of launching the Google Maps app is triggered.
I would like to prevent that behavior from occurring because some of the addresses aren't meant to be selectable. Is there anything I can do?
Update:
A commenter asked me to paste an example HTML snippet that triggers the behavior.
<hgroup class="unit list_item_body">
<h2 class="thick truncated heading">
Foobar
</h2>
<h3 class="truncated subheading">
123 East Market St., Charlottesville, VA, 22902
</h3>
</hgroup>
Notice there's no link on the address. Nevertheless, tapping the address triggers the behavior of launching Maps. This occurs whether I'm accessing the site through the WebView or viewing the site itself.
I figured this out. This meta tag will preclude the browser controls from hijacking address strings:
<meta name="format-detection" content="address=no">
Take a look at WebViewClient.shouldOverrideUrlLoading
webView.setWebViewClient(new WebViewClient() {
public boolean shouldOverrideUrlLoading(WebView view, String url) {
boolean shouldHandle = true;
//Check if you want to override the loading of the URL and set shouldHandle accordingly
return shouldHandle ;
}
});
I'm looking for a browser-simulating library on android, which handles things like
loading a website (http/https)
Redirections: HTTP (3xx Status Codes), JavaScript, HMTL tags
filling out html-forms
easy html parsing (could fall back to JSoup for that one)
HttpUnit or HtmlUnit would do just fine, but both of them are a pain to get running on android.
Is there any other option other than (Android)HttpClient (and therefore doing lots of the above on my own)? Or can I somehow get use of the android webkit/browser?
Thanks in advance!
I would recommend you to have a look at AndroidDriver for selenium. It seems to be a straightforward approach to easy test WebApplications with the Android Testing Framework.
You must use an Activity that includes a WebView in order to test HTTP/HTTPs websites.
The Driver is instanciated with this Activity:
WebDriver driver = new AndroidWebDriver(getActivity());
Here is a sample test, quoted from the link above:
public void testGoogleWorks()
// Loads www.google.com
driver.get("http://www.google.com");
// Lookup the search box on the page by it's HTML name property
WebElement searchBox = driver.findElement(By.name("q"));
// Enter keys in the search box
searchBox.sendKeys("Android Rocks!");
// Hit enter
searchBox.submit();
// Ensure the title contains "Google"
assertTrue(driver.getTitle().contains("Google"));
// Ensure that there is at least one link with the keyword "Android"
assertTrue(driver.findElements(By.partialLinkText("Android")).size() > 1);
}