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
Related
Here are the relevant parts in my code to the problem:
<head>
<link rel="stylesheet" type="text/css" href="/static/semantic/dist/semantic.rtl.min.css" />
<?php Yii::app()->clientScript->registerCoreScript('jquery'); ?>
<script src="/static/semantic/dist/semantic.min.js"></script>
<script src="/static/semantic/dist/components/dropdown.min.js"></script>
<script>
$('.ui.dropdown')
.dropdown()
;
</script>
</head>
<body>
<div class="ui dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
</div>
</body>
It seems like the dropdown just refuses to work. I've tried other things as well (search, accordion) and they haven't worked as well.
Checked on different browsers, on different platforms, and nothing.
Checked also maybe there's a problem with loading the files, but according to Chrome everything loads fine and there're no errors.
There is no .ui.dropdown element on the page when you are invoking dropdown plugin. You need to initialize it when DOM is ready:
$(function() {
$('.ui.dropdown').dropdown();
});
Or you could also put your original script block before closing </body> tag, it would work too.
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'm trying to get Foundation's Abide validation working with a simple static form, but I'm not getting any errors or response from it. I'm expecting to see data-invalid attributes added to the invalid input elements, but they remain unchanged.
I've included Modernizr, jQuery and as far as I can see from the Zurb docs, all the dependencies that Abide requires. I don't care about CSS right now, just want to be able to have Abide validate the form.
Most of the following code has been taken from the Zurb Foundation docs:
<html>
<head>
<title>Abide test...</title>
<script src="js/modernizr.js"></script>
</head>
<body>
<form data-abide id="contact">
<div class="name-field">
<label>Your name
<small>required</small>
<input type="text" required>
</label>
<small class="error">Name is required and must be a string.</small>
</div>
<div class="email-field">
<label>Email
<small>required</small>
<input type="email" required>
</label>
<small class="error">An email address is required.</small>
</div>
<button type="submit">Submit</button>
</form>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/fastclick.js"></script>
<script type="text/javascript" src="js/foundation.js"></script>
<script type="text/javascript" src="js/foundation.abide.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Can anyone see what's wrong with the above? All the .js files are loading, no 404 errors in Chrome console.
It seems that this piece of CSS is required:
meta.foundation-data-attribute-namespace {
font-family: false;
}
Foundation 5 seems to read its global namespace from the font-family property of meta.foundation-data-attribute-namespace (that's kinda weird).
Foundation.css is required. When I forked your fiddle and simply added foundation.css to external resources, data-invalid appends as you'd expect.
I'm trying to style an HTML select menu with JQuery UI; but it simply isn't working. Here is a JSFiddle.
Below are stripped down examples of what I'm trying to accomplish.
Here's my HTML code:
<form action="#">
<fieldset>
<label for="parameterSelectMenu">Select a Parameter</label>
<select name="parameterSelectMenu" id="parameterSelectMenu">
<option value="volvo">Temperature Actual</option>
</select>
</fieldset>
</form>
<!-- A button to show JQuery is working... -->
<button id="clicker">A button element</button>
Here's the JavaScript:
$("#clicker").button();
$("#parameterSelectMenu").selectmenu();
In Firefox "selectmenu" is reported as not a function...
Updated FIDDLE
The problem is that you are using older version of jquery-ui in jsfiddle demo you have created which does not have support for the selectmenu plugin.
so you have to add the latest version plugin files as shown below:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
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