I am trying to use jquery virtual keyboard - http://mottie.github.io/Keyboard/mobile.html to create a numbers only input text with a few accelerator keys for a mobile web application.
However I am having a huge issue that is the native android keyboard gets triggered when i press the input box to trigger the on-screen/ virtual keyboard. How do I trigger only virtual keyboard, other plugins can also be used. I have tested a few that all have the same issue.
Perhaps there is a way to disable the input field so it does not trigger the native keyboard but still triggers the on-screen one? making input "readonly" has some issue.
I have the same issue as this other so user: https://stackoverflow.com/questions/15289281/disable-mobile-default-keyboard-to-show-up-using-my-own-virtual-keyboard-web-a however there is no answer to his question.
First attempt
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Virtual Keyboard Basic Demo</title>
<!-- demo -->
<link href="demo/demo.css" rel="stylesheet">
<!-- jQuery & jQuery UI + theme (required) -->
<link href="http://code.jquery.com/ui/1.9.0/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.min.js"></script>
<!-- keyboard widget css & script (required) -->
<link href="css/keyboard.css" rel="stylesheet">
<script src="js/jquery.keyboard.js"></script>
<!-- keyboard extensions (optional) -->
<script src="js/jquery.mousewheel.js"></script>
<!--
<script src="js/jquery.keyboard.extension-typing.js"></script>
<script src="js/jquery.keyboard.extension-autocomplete.js"></script>
-->
<!-- initialize keyboard (required) -->
<script>
$(function(){
alert("Keyboard ON");
//$('#keyboard').keyboard();
$('#keyboard').on('click tap vclick', function (event) {
//alert("detected touch");
event.stopImmediatePropagation();
event.preventDefault();
$('#keyboard').keyboard();
});
});
</script>
</head>
<body>
<!-- Links to other demo pages & docs -->
<div id="nav">
Main Demo
<a class="current" href="basic.html">Basic</a>
Mobile
Layouts
Navigate
Calculator
<a class="play" href="http://jsfiddle.net/Mottie/MK947/">Playground</a>
<a class="git" href="https://github.com/Mottie/Keyboard/wiki">Documentation</a>
<a class="git" href="http://github.com/Mottie/Keyboard/downloads">Download</a>
<a class="issue" href="https://github.com/Mottie/Keyboard/issues">Issues</a><br><br>
</div>
<!-- End Links -->
<div id="wrap"> <!-- wrapper only needed to center the input -->
<!-- keyboard input -->
<input id="keyboard" type="text">
<div><p>Static TEST</p></div>
</div> <!-- End wrapper -->
</body>
I added the following code it does appear to work, however more testing is required to make this a solid workaround:
$('.keyboard').on('focus click tap vclick', function (event) {
event.stopImmediatePropagation();
event.preventDefault();
$('.keyboard').blur();
});
You can add readonly to the <input> tag, this will stop the native keyboard from appearing. Though remember to remove it for desktop users, which will require some device detection which is never fun.
Just use the global attribute <div inputmode="none">,it shoule help.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
Related
I'm trying to set focus to a particular edit field when a page opens or button is pressed. The following simple HTML/Javascript (Test.html) works with Firefox and Chrome but not Safari. Safari will clear the text with the clear button and post it with find button but not select it when the select button is pressed. Any help would be appreciated. (iOS 7 on an iPad 2)
Update -- Replaced with working code
<html>
<head>
<!-- Latest JQuery; Must be loaded before Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<script>
$(document).ready(function()
{
var identNum = document.getElementById("identNum");
identNum.value = "AAAABBBB111"
identNum.focus();
identNum.setSelectionRange(0, identNum.value.length);
});
</script>
<body>
<div>
<form class="form-horizontal" name="myForm" role="form" action="Test" method="post">
<div class="form-group" align="center">
<div>
<label class="control-label">Text:</label>
<input type="text" id="identNum" name="identNum" size="25" value="" style="text-align:center;'">
</div>
<div>
<button class="btn btn-primary">Find</button>
<a class="btn" onclick="javascript:document.getElementById('identNum').value=''" >Clear</a>
<a class="btn" onclick="javascript:document.getElementById('identNum').focus(); document.getElementById('identNum').setSelectionRange(0, identNum.value.length)" >Select</a>
</div>
</div>
</form>
</div>
</body>
</html>
EDITED TO INCLUDE .focus()
Try
javascript:document.getElementById('identNum').focus().setSelectionRange(0, 999);
Mobile devices, in particular iOS can be quite funny about select();
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
EDIT: A note on input focus without user interaction
As found by #zappullae
It appears that in recent versions of iOS, Apple require user interaction in order to activate the keyboard, so this will not be possible on page load.
https://medium.com/#brunn/autofocus-in-ios-safari-458215514a5f
Basically I'm trying to get a plugin to work which opens up a webpage as an overlay rather than taking you away from the current page you are on. I cannot get the demo to work properly. It is demonstrated here:
http://jquerytools.github.io/demos/overlay/external.html
with a working demo here:
http://jquerytools.github.io/demos/overlay/external.htm
I can get this working perfectly for other pages which I host (relative paths), but I would like the overlay to open, for example, www.google.com - when I try this the overlay is simply blank. I am at a loss!
<!DOCTYPE html>
<html>
<!--
This is a jQuery Tools standalone demo. Feel free to copy/paste.
http://flowplayer.org/tools/demos/
Do *not* reference CSS files and images from flowplayer.org when in
production Enjoy!
-->
<head>
<title>jQuery Tools standalone demo</title>
<!-- include the Tools -->
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<!-- standalone page styling (can be removed) -->
<link rel="shortcut icon" href="/media/img/favicon.ico">
<link rel="stylesheet" type="text/css"
href="/media/css/standalone.css"/>
<link rel="stylesheet" type="text/css"
href="/media/css/overlay-apple.css"/>
<style>
/* use a semi-transparent image for the overlay */
#overlay {
background-image:url(/media/img/overlay/transparent.png);
color:#efefef;
height:450px;
}
/* container for external content. uses vertical scrollbar, if needed */
div.contentWrap {
height:441px;
overflow-y:auto;
}
</style>
</head>
<body><!-- external page is given in the href attribute (as it should be) -->
<a href="external-content.htm" rel="#overlay" style="text-decoration:none">
<!-- remember that you can use any element inside the trigger -->
<button type="button">Show external page in overlay</button>
</a>
<!-- another link. uses the same overlay -->
<a href="external-content2.htm" rel="#overlay" style="text-decoration:none">
<button type="button">Show another page</button>
</a>
<!-- overlayed element -->
<div class="apple_overlay" id="overlay">
<!-- the external content is loaded inside this tag -->
<div class="contentWrap"></div>
</div>
<!-- make all links with the 'rel' attribute open overlays -->
<script>
$(function() {
// if the function argument is given to overlay,
// it is assumed to be the onBeforeLoad event listener
$("a[rel]").overlay({
mask: 'darkred',
effect: 'apple',
onBeforeLoad: function() {
// grab wrapper element inside content
var wrap = this.getOverlay().find(".contentWrap");
// load the page specified in the trigger
wrap.load(this.getTrigger().attr("href"));
}
});
});
</script>
</body>
</html>
I have a jQuery Mobile App that relies on a popup to run a Time & Attendance system. The system works fine except for IE versions 9+ on Windows 8+.
When the button to check in/out at a client is pressed, a POST request is sent to a handler page to manage the request (ie validate data, enter into database) before being forwarded to the relevant client entry.
What appears to be happening is the button event is being fired twice. The first time is flagged as "Aborted" (as seen in Result column of the F12 Developer Tools) before it is called again (I would post images, but don't have sufficient reputation). However it seems the call is making it to the handler page, despite being supposedly aborted, as there are TWO entries appearing in the database.
The code for the button is as follows:
<button data-inline="true" data-mini="true" data-theme="b" data-ajax="false" id="submitBtn" onClick="this.form.submit(); this.disabled=true;">Check Out / Split Visit</button>
I deliberately disable the button so users can't click on the button multiple times. I have tried different ways of generating the button, including using a href and setting the data-role to button and making the button a submit button - the same thing occurs. There is no other JavaScript running on the button click as it was playing up with some mobile devices (user validation is done on the handler page).
I can force the page to render as an older version of IE by setting the X-UA-Compatible to be IE=7, but this makes the app awful to look at and I'm not sure about the security aspects of forcing IE to handle the page as an earlier version.
I'm using jQuery Mobile 1.3.2 and jQuery 1.10.2 as the newer versions don't have some features that are core to our application. The backend is written in PHP. The fault has been duplicated on Windows Phone 8, a Surface 3 and Windows 8.1 Desktop.
Popup Code:
<div data-role="popup" id="checkInOut" data-theme="b" data-dismissible="false" data-overlay-theme="b" class="ui-content" style="max-width:340px; padding-bottom:2em;">
<h3 id="checkTitle">Check-In At Client</h3>
<form action="checkInOutHandler.php" method="post" name="checkInOutForm" id="checkInOutForm" data-ajax="false">
<input type="hidden" name="TAClientID" id="TAClientID" />
<input type="hidden" name="actionType" id="actionType" value="In" />
<label for="useCurrentTime">
Use Current Time
</label>
<input id="useCurrentTime" name="useCurrentTime" type="checkbox" class="useCurrentTime" data-mini="true" checked="checked" />
<!-- Hidden Div for the manual entry of time !-->
<div id="customTimeDiv" style="display: none;">
<label for="customTime">
Enter the time you wish to use (in 24 Hour format hh:mm)
</label>
<input id="customTime" name="customTime" type="time" placeholder="Enter Time (hh:mm)" data-mini="true" />
<label for="customReason">
You MUST select a reason for not using the current time
</label>
<select name="customReason" id="customReason" data-theme="b" data-icon="arrow-d" data-inline="true" data-mini="true">
<option value="" selected>Please select a reason...</option>
<option value='937'>No reception</option><option value='938'>Forgot</option><option value='943'>Phone flat / not working</option><option value='944'>Problem with portal</option><option value='949'>Split Visit</option><option value='964'>Incorrect Client Selected</option><option value='963'>Incorrect Service Selected</option><option value='945'>Other (Payroll may call to confirm)</option> </select>
</div>
<!-- End Hidden Div !-->
<br />
<input type="hidden" id="travelTime" name="travelTime" data-mini="true" data-inline="true" value="0" />
<button data-inline="true" data-mini="true" data-theme="b" data-ajax="false" id="submitBtn" onClick="this.form.submit(); this.disabled=true;">Check In</button>
Cancel
</form>
</div>
Header Code:
<!DOCTYPE html>
<html>
<head>
<title>SMNCC App</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="https://portal.suemann.com.au/favicon.ico" />
<!-- <script type="text/javascript" src="./js/timeTrack.js"></script>!-->
<script type="text/javascript" src="./js/readNewsItem.js"></script>
<link rel="stylesheet" href="./jqueryMobile/jquery.mobile.min.css" /> <!-- Original File: jquery.mobile-1.3.2.min.css !-->
<link rel="stylesheet" href="./themes/hartijaPrint.css" type="text/css" media="print"> <!-- Hartija print CSS framework !-->
<script type="text/javascript" src="./jqueryMobile/jquery.min.js"></script> <!-- Original File: jquery-1.10.2.min.js !-->
<script type="text/javascript" src="./jqueryMobile/disableAjax.js"></script>
<script type="text/javascript" src="./jqueryMobile/jquery.mobile.min.js"></script> <!-- Original File: jquery.mobile-1.3.2.min.js !-->
</head>
<body
I'm not running Windows 8 so I can't test it, but you can check to see if the button has already been pressed using jQuery.
Eg: Html code:
<button id="mybutton">Click me!</button>
jQuery:
var alreadySent = false;
$(document).ready(function() {
$("#myButton").click(function(event) {
event.preventDefault();
if (!alreadySent) {
sendPostRequestOrWhatever();
alreadySent = true;
}
$(this).prop("disabled", true);
});
});
Of course, this assumes that when you say the button fires twice you mean that the click event is running twice. If the click event is only firing once but the send request is firing twice, then the code won't work.
I am trying to create an HTML order type page with 3 buttons using jQuery Mobile:
Pick Up
Drop Off
Ship It
I've created the buttons and placed them properly on the page. Now, I'd like to display a unique form based on which button is clicked by the user.
Taking a look at examples it appears my options are jQuery, AJAX or Javascript. I'm already using jQuery so I tried going that route with no luck. Having added in the load HTML and JS Alert... my page will completely ignore the loading of HTML, but still display the alert. I've verified that my divs are properly named and that each link has a proper id set. So I gave up on jQuery for a bit.
On to javascript... add my logic in the between tags and again... it ignores loading of HTML content. I've tried putting things in divs, renaming divs, moving my form code to a seperate .html and .txt, but still no luck. I found a working example here and tried forcing its code into my page. Again, it does not load anything on button click when included in my page. (I'm using Chrome Version 35.0.1916.153)
Currently, the code for my page is as follows:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Order Type</title>
<script type="text/javascript">
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
sel[i].style.display = 'none';
}
document.getElementById('result'+idInfo).style.display = 'block';
}
</script>
<link rel="stylesheet" href="assets/css/pp_mis_oa.css" />
<!-- Standard jQquery Mobile themes can be created and replaced, to apply universal styling -->
<!-- Go to: http://jquerymobile.com/themeroller/index.php to build one, and download it to the themes directory. -->
<link rel="stylesheet" href="themes/jqm-test/theme.min.css" />
<!-- Do not edit or remove the following jQuery framework files. -->
<link rel="stylesheet" href="lib/jquery.mobile.structure-1.3.1.min.css" />
<script src="lib/jquery-1.9.1.min.js"></script>
<script src="lib/jquery.mobile-1.3.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.4.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Start Main Landing Page -->
<div data-role="page" data-theme="b" class="has_footer">
<div data-role="content">
<p>
<div id="buttonDiv" data-role="navbar">
<ul>
<li>Pick Up</li>
<li>Drop Off</li>
<li>Ship It</li>
</ul>
</div><!-- /navbar -->
<div id="result" style="clear:both;"></div>
</div> <!-- End Content Div -->
<!-- start footer -->
<div data-role="footer" data-position="fixed" data-id="footer-nav" data-theme="d" class="footer-bar">
<div class="ui-grid-solo">
<div class="ui-block-a"><button type="v" data-theme="b">Continue</button></div>
</div>
</div><!-- end footer -->
</div>
<!-- End Main Landing Page -->
<div id="divLinks">
<div id="container1">Container #1<p>Whole bunch of text 1</div>
<div id="container2">Container #2<p>Whole bunch of text 2</div>
<div id="container3">Container #3<p>Whole bunch of text 3</div>
</div>
</body>
What is going on here that jQuery/Javascript refuse to load in my content to my divs? Can someone help point me in the right direction?
Thank you!
If you wanted to do this with jQuery, you could change your showDiv function to the following:
function showDiv(idInfo) {
//hide all divs
$('#divLinks div').each(function() { $(this).hide(); });
//show the one selected
$('#container'+idInfo).show();
}
To move content from your "container" divs to your "result" div:
function showDiv(idInfo) {
//populate "result" div with selected content
$('#result').html($('#container'+idInfo).html());
}
I think you're trying to show divs with ids "result"+IdInfo where your div ids are container1, container2 and container3, so you should replace:
document.getElementById('result'+idInfo).style.display = 'block';
for
document.getElementById('container'+idInfo).style.display = 'block';
Also keep in mind that loading all the forms in the html (even if they are hidden) is not a good practice, so someone could see what he doesn't have to (and also can submit it). Consider to use some dynamic language (such PHP) to load only the form needed as the user type.
I am using phonegap like this in my application, also note the app is being styled by jquery mobile,
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
I have this html,
<div id="sync" data-role="page">
<div data-role="header" data-position="inline">
<a data-rel="back" data-icon="back">Back</a>
<h1>Sync</h1>
</div>
<div data-role="content">
<button onclick="sync()">Sync</a></button>
</div>
</div>
I have compiled this for Android and have it working on my Android phone.
But the button there called 'sync' is not always responsive. I click the button and the sync() method doesn't get called every time. I find myself clicking the button a number of times. I can see the button moving when I click it, it is responding by drawing itself being pushed in, but the sync method is not being called.
The sync method starts like this,
function sync()
{
alert("syncing");
$.mobile.loadingMessage = "syncing";
$.mobile.showPageLoadingMsg();
I put the alert in for debugging purposes.
UPDATE:
It has been pointed out that my HTML has an extra tag in it. I have removed it as below but the problem still exists,
<div data-role="content">
<button onclick="sync()">Sync</button>
</div>
I had a similar problem in my application. I tried two different things but I'm not sure wich fixed it.
I added charset="utf-8" in my script tag.
I moved the button click function in to its own script tag. I think there's an error in the other JavaScript block that is preventing the button click function from working when it's in that script block. So you can try isolating the button click JavaScript and see if that helps.
Joke answer: did you push the button hard enough?
Possibly the problem answer:
<button onclick="sync()">Sync</a></button>
^^^^---dangling tag
Is that </a> possibly the cause of the button breaking?