I am trying to provide a mask to enable user to enter ssn in the format of 999-99-9999. I tried to use the masked input plugin from digital bush. This works fine on chrome and safari but doesn't work on android.
Problem: When entering the numbers, it is fine until 123- and when I enter the next 2 digits it reverses the sequence. for ex: if I enter 123-45 it displays as 123-54 and this issue continues for each separator. For ex: if I enter 123-45-6789, it displays as 123-56-8974
I tried to write my own code as below to handle the keypress and keyup and still get the same issue. Has any one had any success with masking input on android? What is the alternative?
Here is the complete html with local links to code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> test ground</title>
<!-- JQuery specific -->
<script type="text/javascript" src="libs/jQuery/jQuery.min.js" ></script>
<script type="text/javascript" src="libs/jQuery/mobile/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="libs/jQuery/mobile/jquery.mobile.min.css" />
<script src="javascript/jquery.maskedinput-1.3.js" type="text/javascript" charset="utf-8"></script>
<!-- Application specific -->
<script type="text/javascript">
$(document).bind('mobileinit',function(){
// $.mobile.page.prototype.options.addBackBtn = true;
// $.mobile.page.prototype.options.backBtnText = "Previous";
// $.mobile.page.prototype.options.backBtnTheme = "b";
});
$("[data-role='page']").live("pageshow", function(event) {
$("#primaryssn").mask("999-99-9999");
});
</script>
</head>
<body>
<!-- ################### PAGE: launchpage ################### -->
<div data-role="page" id="launchpage">
<div id="header" data-role="header" data-position="fixed" >
<div id="headerlogo" > </div>
<h1 class="appTitle" >My App</h1>
</div>
<div data-role="content" >
<div class="content-primary">
<p> Welcome to my app </p> <br/>
</div>
<!-- Primary SSN -->
<div data-role="none">
<label name="lblprimaryssn" for="primaryssn" > SSN</label>
<input type="text" name="primaryssn" id="primaryssn" value="" />
<span class="error" id="primaryssnerror"> Please enter your SSN as (999-99-9999) </span>
</div>
<br/>
</div><!-- /content -->
</div><!-- /launch page -->
</body>
</html>
Here is the code I used for masking input based on key stroke on keyup:
// _v is value passed in on keyup in this input field
// _d indicates if the key is a backspace to delete character
var setSSN = function (_v, _d){
var v = $.trim(_v);
if ( !_d ){
if ( v.length <= 3 ) {
var validformat1=/^\d{1,3}$/ ;
if ( validformat1.test(v)) {
if ( v.length == 3 ) v = v + '-';
return v;
}
}
else if ( v.length >3 && v.length <= 6) {
var validformat2=/^\d{3}\-\d{0,2}$/ ;
if ( validformat2.test(v)) {
if ( v.length == 6 ) v = v + '-';
return v;
}
}
else {
var validformat3=/^\d{3}\-\d{2}\-\d{0,4}$/ ;
if ( validformat3.test(v)) {
if ( v.length == 6 ) v = v + '-';
return v;
}
}
v = v.substring(0,v.length-1);
return v;
}
else {
if ( 3 == v.length || 6 == v.length ) {
v = v.substring(0,v.length-1);
}
}
return v;
}
If you just want to hide the characters as they type you could use
<input type="password">
This issue has been fixed in the masked input jquery plugin. Updating to the latest version should resolve this issue.
Related
Below is the code I have tried. When I execute the code below it appears as when I click a button in my application and it is opening device phone book and displaying contacts. When I click on any contact it is picked by application but it should not open device address book but when clicked it should display the contacts of my device in my application. Can anyone suggest me how to do this?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, r-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter" ng-controller="AppCtrl" class="platform-android platform-cordova platform-webview">
<ion-pane>
<ion-header-bar class="bar-stable">
<button class="button" ng-click="pickContact()">Contacts</button>
<h1 class="title">All Contacts</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<a class="item item-thumbnail-left" ng-repeat="contact in data.selectedContacts">
<img src="{{contact.photos[0].value}}" ng-if="contact.photos.length > 0">
<h2>{{contact.displayName}}</h2>
<p ng-if="contact.emails.length > 0">{{contact.emails[0].type}} : {{contact.emails[0].value}}</p>
<p ng-if="contact.phones.length > 0">{{contact.phones[0].type}} : {{contact.phones[0].value}}</p>
</a>
</div>
<p class="padding"></p>
</ion-content>
</ion-pane>
</body>
</html>
Javascript:
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.service("ContactsService", ['$q',
function($q) {
var formatContact = function(contact) {
return {
"displayName": contact.name.formatted || contact.name.givenName + " " + contact.name.familyName || "Unknown Person",
"emails": contact.emails || [],
"phones": contact.phoneNumbers || [],
"photos": contact.photos || []
};
};
var pickContact = function() {
var deferred = $q.defer();
if (navigator && navigator.contacts) {
navigator.contacts.pickContact(function(contact) {
deferred.resolve(formatContact(contact));
});
} else {
deferred.reject("Hurray!!!!...... No contacts in desktop browser");
}
return deferred.promise;
};
return {
pickContact: pickContact
};
}
])
.controller("AppCtrl", ['$scope', 'ContactsService',
function($scope, ContactsService) {
$scope.data = {
selectedContacts: []
};
$scope.pickContact = function() {
ContactsService.pickContact().then(
function(contact) {
$scope.data.selectedContacts.push(contact);
console.log("Selected contacts=");
console.log($scope.data.selectedContacts);
},
function(failure) {
console.log("Hurray!!!!...... Failed to pick a contact");
}
);
}
}
])
You could try using $cordovaContacts which is a part of the ngCordova (ngCordova needs to be installed). You can install in your app with the command cordova plugin add cordova-plugin-contacts. Then there is a simple function to getting all contacts in your contacts list.
$scope.getAllContacts = function() {
$cordovaContacts.find({filter: '',multiple:true}).then(function(allContacts) {
$scope.contacts = allContacts;
});
};
Note: It seems to be so that the find() function in $cordovaContacts can not be empty. Include ie. a filter in there for it to work.
EDIT:
This is a demonstration of the general structure and functions which you need to make the ngCordova contacts plugin to work.
Here's all my code you'll need in a JSFiddle: https://jsfiddle.net/thepio/osjppoqu/
And then I just call the getAllContacts function using a button click in my app.html file like this:
<button type="button" ng-click="getAllContacts()" class="button button-block button-positive">Get contacts</button>
REMEMBER it only works on a real device, probably not even emulator (haven't tested though). Include the ngCordova in your module. If you're calling the contacts plugin without a click or something remember that it is required that it's only called AFTER the device is ready. In Ionic you can do this with the following:
$ionicPlatform.ready(function() {
// Call the plugin here
});
I'm going to check this value with the Android Webview After saving the values to the local storage on the Android browser.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>HTML5</title>
<script>
window.onload = function(){
loadStorage();
document.querySelector("form").onsubmit = saveStorage;
};
function saveStorage(){
var saveId = document.getElementById("saveId").checked;
var userId = document.getElementById("userId").value;
if(saveId){
window.localStorage.setItem("userId", userId);
window.localStorage.setItem("userIdSaved", true);
}else{
window.localStorage.removeItem("userId");
window.localStorage.setItem("userIdSaved", false);
}
}
function loadStorage(){
var userId = window.localStorage.getItem("userId");
document.getElementById("userId").value = userId;
if(userId!=null){
document.getElementById("saveId").checked = true;
}
}
</script>
</head>
<body>
<h1>Login(Web Storage)</h1>
<form action="login.php" method="post">
<fieldset>
id: <input type="text" name="id" id="userId" autocomplete="off">
<input type="checkbox" id="saveId">Save ID<br>
pass: <input type="password"><br>
<input type="submit" value="login">
</fieldset>
</form>
</body>
</html>
However, if you run a webview not output the value stored in the Android browser.
Check the values by executing the Webview, but does not save local storage in
<html>
<head>
<meta charset="UTF-8">
<title>HTML5</title>
</head>
<?
$Id = $_POST['id'];
?>
<script>
window.onload = function(){
var userId = window.localStorage.getItem("userId");
alert(userId);
init();
};
function init(){
var list = document.getElementById( "list");
list.innerHTML = "";
for( var i = 0; i < localStorage.length ; i++){
var key = localStorage.key(i);
list.options[list.options.length] = new Option(localStorage[key],key);
}
}
</script>
<body>
<h1>Result</h1>
<p>Welcome to <?=$Id?> </p>
home<br/>
<select id = "list" size= "10"></ select>
<fieldset >
key : <input type = "text" id= "key"/>
value : <input type = "text" id= "value"/>
</fieldset >
</body>
</html>
To show the value stored in the Webview, how can I do?
I am not sure you can use web localStorage inside WebView. However you may store values in the application preferences. Implement corresponding methods in your custom Javascriptinterface. See https://stackoverflow.com/a/10389678/527759
Getting error
"11-13 13:10:55.470: E/Web Console(9799):
Uncaught Error: TYPE_MISMATCH_ERR: DOM Exception 17 at
file:///android_asset/www/index.html:304"
when converting html div content to canvas in android with phonegap.
It is working properly on browser. Any help will be appreciated. I am using jQuery-1.9.1, jQuery-UI.
code snippet:
// html file
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="resourcess/css/jquery-ui.css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/html2canvas.js"></script>
<script src="js/jquery.plugin.html2canvas.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="cordova-2.5.0.js"></script>
<link rel="stylesheet" href="resourcess/css/style.css" />
</head>
<body>
<div class="imag-container">
<div class="dragImg">
<div id="dropHere"></div>
<div id="click" > click </div>
<div id="img-check">check</div>
<canvas id="canvas" width="100" height="100">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</body>
// script
$(function(){
//Make every clone image unique.
var counts = [0];
var resizeOpts = {
handles: "all" ,autoHide:true
};
$(".dragImg").draggable({
helper: "clone",
//Create counter
start: function() { counts[0]++; }
});
$("#dropHere").droppable({
drop: function(e, ui){
if(ui.draggable.hasClass("dragImg")) {
$(this).append($(ui.helper).clone());
//Pointing to the dragImg class in dropHere and add new class.
$("#dropHere .dragImg").addClass("item-"+counts[0] );
$("#dropHere .img").addClass("imgSize-"+counts[0]);
//Remove the current class (ui-draggable and dragImg)
$("#dropHere .item-"+counts[0]).removeClass("dragImg ui-ggable ui-draggable-dragging");
$(".item-"+counts[0]).dblclick(function() {
$(this).remove();
});
make_draggable($(".item-"+counts[0]));
$(".imgSize-"+counts[0]).resizable(resizeOpts);
}
}
});
var zIndex = 0;
function make_draggable(elements)
{
elements.draggable({
containment:'parent',
start:function(e,ui){ ui.helper.css('z-index',++zIndex); },
stop:function(e,ui){
}
});
}
$('#click').click(function(){
//Some code
var domElement = document.getElementById('dropHere');
setTimeout(function() {
var canvas = document.getElementById("canvas"),
context = canvas.getContext('2d');
html2canvas(domElement, {
onrendered: function (domElementCanvas) {
var canvas = document.getElementById("canvas");
canvas.getContext('2d').drawImage(domElementCanvas, 0, 0, 50, 50,0,0,100,100);
}
});
}, 10000);
});
});
I have a PhoneGap application with iScroll4, its basically iScroll example with 2000 list items.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>iScroll demo: iOS Perfect Scrollbar</title>
<link rel="stylesheet" type="text/css" href="css/general.css">
<link rel="stylesheet" type="text/css" href="css/scrollbar.css">
<script src="js/jquery-1.7.1.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/alldata.js"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper',
{
scrollbarClass: 'myScrollbar',
hideScrollbar:false,
/*onBeforeScrollStart: function (e) { return false; }*/
});
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
<script>
function initList(){
for(var i=0; i<allData.length; i++){
var line = "<li style='color:#"+ allData[i].Color + ";'>" + allData[i].EventName + "</li>"
$("#thelist").append(line);
}
}
$(document).ready(function(){
initList();
initList();
initList();
initList();
//alert("Finished!");
});
</script>
</head>
<body>
<div id="header">iScroll</div>
<div id="wrapper">
<div id="scroller">
<ul id="thelist">
</ul>
</div>
</div>
<div id="footer"></div>
</body>
</html>
Note: the variable allData is a JSON array with 500 objects.
EDITED:
It works fine on Motorola Atrix (2.3.3) and on Galaxy 3,
But it doesn't move on Galaxy 2 (4.2.2) and Galaxy3 after 1000 list items, strange Motorola Atrix is has lower Android version and it's web-toolkit is slower
Is there any way to resolve that problem?
After the data is loaded you just need to refresh the list.
function initList(){
for(var i=0; i<allData.length; i++){
var line = "<li style='color:#"+ allData[i].Color + ";'>" + allData[i].EventName + "</li>"
$("#thelist").append(line);
}
myScroll.refresh();
}
I am trying to wrote an app using phonegap and jquerymobile.
My app draw 4 image from a Image array and when i touch on 1 image, 1 page is called to display the image in full screen, but it's dont draw like i want and just 2 images is display in another page, other images is still don't display.
Please, check my code and tell me what wrong i am.
thanks for read.
this is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ListApp</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.1.1.min.js"></script>
<script src="ui/jquery-ui.js"></script>
<script src="cordova-2.5.0.js"></script>
<style>
img.fullscreen {
max-height: 100%;
max-width: 100%;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
var drawCanvasImage = function (ctx,grid,row,x,y,w,h) {
return function() {
// window.alert('row:' + row);
ctx.drawImage(grid[row], x, y,w,h);
}
}
var sizedWindowWidth = ($(window).width() - 34);
var sizedWindowHeight = ($(window).height() - 34);
var r1=0;
var r2=0;
var mag = ["img/a1.png","img/a2.png","img/a3.png","img/a4.png","img/a5.png"];
var grid = new Array();
var sImg = new Array();
$("#canvas1").width(sizedWindowWidth);
$("#canvas1").height(sizedWindowWidth*3/10);
$("#canvas2").width(sizedWindowWidth);
$("#canvas2").height(sizedWindowWidth*1/10);
$("#canvas3").width(sizedWindowWidth);
$("#canvas3").height(sizedWindowWidth*3/10);
$("#canvas4").width(sizedWindowWidth);
$("#canvas4").height(sizedWindowWidth*1/10);
$("#canvas5").width(sizedWindowWidth/2 - 10);
$("#canvas5").height(sizedWindowWidth*1/10);
$("#canvas6").width(sizedWindowWidth/2 - 10);
$("#canvas6").height(sizedWindowWidth*1/10);
$("#canvas7").width(sizedWindowWidth/2 - 10);
$("#canvas7").height(sizedWindowWidth*1/10);
$("#canvas8").width(sizedWindowWidth/2 - 10);
$("#canvas8").height(sizedWindowWidth*1/10);
var canvas1 = $("#canvas1").get(0);
var canvas2 = $("#canvas2").get(0);
var canvas3 = $("#canvas3").get(0);
var canvas4 = $("#canvas4").get(0);
if(canvas1 && canvas2 && canvas3 && canvas4)
{
var ctx1 = canvas1.getContext('2d');
var ctx2 = canvas2.getContext('2d');
var ctx3 = canvas3.getContext('2d');
var ctx4 = canvas4.getContext('2d');
if(ctx1 && ctx2 && ctx3 && ctx4)
{
ctx1.canvas.width = sizedWindowWidth;
ctx1.canvas.height = sizedWindowWidth*3/10;
ctx2.canvas.width = sizedWindowWidth;
ctx2.canvas.height = sizedWindowWidth*1/10;
ctx3.canvas.width = sizedWindowWidth;
ctx3.canvas.height = sizedWindowWidth*3/10;
ctx4.canvas.width = sizedWindowWidth;
ctx4.canvas.height = sizedWindowWidth*1/10;
$("#canvasDraw").click(function(){
for(var r=0;r<2;r++) {
var x = 0;
var y = r*sizedWindowWidth/2;
var w = sizedWindowWidth/2 - 5;
var h = sizedWindowWidth*3/10;
sImg[r] = Math.floor((Math.random()*4)+0);;
grid[r] = new Image();
grid[r].onload = drawCanvasImage(ctx1,grid,r,y,x,w,h);
ctx2.fillStyle = "#00ff00";
ctx2.fillRect(y, x, w, h/3);
ctx4.fillStyle = "#00ff00";
ctx4.fillRect(y, x, w, h/3);
grid[r].src = mag[sImg[r]];
}
for(var d=0;d<2;d++) {
var x = 0;
var y = d*sizedWindowWidth/2;
var w = sizedWindowWidth/2 - 5;
var h = sizedWindowWidth*3/10;
sImg[d+2] = Math.floor((Math.random()*4)+0);;
grid[d] = new Image();
grid[d].onload = drawCanvasImage(ctx3,grid,d,y,x,w,h);
grid[d].src = mag[sImg[d+2]];
}
for (var j=0;j<mag.length;j++) {
if(sImg[0] == j){
$('#img1').attr("src",mag[j]);
}
if(sImg[1] == j){
$('#img2').attr("src",mag[j]);
}
if(sImg[2] == j){
$('#img3').attr("src",mag[j]);
}
if(sImg[3] == j){
$('#img4').attr("src",mag[j]);
}
}
});
document.getElementById("mycanvas").addEventListener("touchstart", touchHandler, false);
document.getElementById("mycanvas").addEventListener("touchmove", touchHandler, false);
document.getElementById("mycanvas").addEventListener("touchend", touchHandler, false);
var x;
var y;
function touchHandler(e) {
if (e.type == "touchstart") {
console.log("touch start! x: " + x + "y: " + y);
e.preventDefault();
x = event.touches[0].pageX;
y = event.touches[0].pageY;
if (x>10 && x<150 && y>10 && y<140) {
$('#anh1').show();
}
if (x>166 && x<298 && y>10 && y<140) {
$('#anh2').show();
}
if (x>16 && x<150 && y<190 && y>265) {
$('#anh3').show();
}
if (x>166 && x<298 && y<190 && y>265) {
$('#anh4').show();
}
} else if (e.type == "touchmove") {
console.log("touch move!");
e.preventDefault();
} else if (e.type == "touchend" || e.type == "touchcancel") {
console.log("touch end!");
e.preventDefault();
}
}
}
}
$('#showimg1').click(function(){
$('#anh1').hide();
$('#mainpage').show();
});
$('#showimg2').click(function(){
$('#anh2').hide();
$('#mainpage').show();
});
$('#showimg3').click(function(){
$('#anh3').hide();
$('#mainpage').show();
});
$('#showimg4').click(function(){
$('#anh4').hide();
$('#mainpage').show();
});
});
</script>
<div data-role="page" id="mainpage">
<div data-role="header">
<h1>Ghep Tranh Tu</h1>
</div>
<div data-role="content" id="mycanvas" style="border:1px solid #d3d3d3;">
<canvas id="canvas1" style="border:1px solid #d3d3d3;margin:0;"></canvas>
<canvas id="canvas2" style="border:1px solid #d3d3d3;margin:0;"></canvas>
<canvas id="canvas3" style="border:1px solid #d3d3d3;margin:0;"></canvas>
<canvas id="canvas4" style="border:1px solid #d3d3d3;margin:0;"></canvas>
</div>
<ul id="wordstore" style="text-align:center;border:1px solid #d3d3d3;">
<ul style="text-align:center;border:1px solid #d3d3d3;">
<li style="display:inline;border:1px solid #d3d3d3;"><canvas id="canvas5"></canvas></li>
<li style="display:inline;border:1px solid #d3d3d3;"><canvas id="canvas6"></canvas></li>
<li style="display:inline;border:1px solid #d3d3d3;"><canvas id="canvas7"></canvas></li>
<li style="display:inline;border:1px solid #d3d3d3;"><canvas id="canvas8"></canvas></li>
</ul>
<ul style="text-align:right;border:1px solid #d3d3d3;">
<li style="display:inline;border:1px solid #d3d3d3;"><input id="canvasDraw" type="button" value="New Game"/></li>
</ul>
</ul>
</div>
<div data-role="page" id="anh1">
<header data-role="header">
<a id="showimg1" href="#" data-icon="grid" data-iconpos="notext">Photos</a>
</header>
<img id="img1" src="img/a14.jpg" style="width:100%;height:100%;"/>
</div><!-- Page Dog -->
<div data-role="page" id="anh2">
<header data-role="header">
<a id="showimg2" href="#" data-icon="grid" data-iconpos="notext">Photos</a>
</header>
<img id="img2" src="img/a14.jpg" style="width:100%;height:100%;"/>
</div><!-- Page Gummy Bears -->
<div data-role="page" id="anh3">
<header data-role="header">
<a id="showimg3" href="#" data-icon="grid" data-iconpos="notext">Photos</a>
</header>
<img id="img3" src="img/a14.jpg" style="width:100%;height:100%;"/>
</div><!-- Page Gummy Bears -->
<div data-role="page" id="anh4">
<header data-role="header">
<a id="showimg4" href="#" data-icon="grid" data-iconpos="notext">Photos</a>
</header>
<img id="img4" src="img/a14.jpg" style="width:100%;height:100%;"/>
</div><!-- Page Gummy Bears -->
</body>
</html>
i fixed it! :D my fail at " y<190 && y>265"
Thanks for reading.