Jquery mobile input issue in android
I am facing a weird issue while using jquery mobile in a phonegap
application. I have attached the fiddle the issue is happening only in
android not in desktop.
I have two input fields where in the first field I have an onfocus event
and onblur event to change the input field's type to number and text and
viceversa.
The second field contains a inputfield which has an onfocus event.
The issue now is when i type some value on the first field and click the
second field and type a number the number gets keep on repeating. Example
: if i type 1 then it continuously comes as 111111111111111
Any idea why this is happening?
Issue Fiddle
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Employee Details</title>
<!-- LIBRARIES -->
<script language="javascript" type="text/javascript"
src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"
type="text/javascript"
charset="utf-8"></script>
<!-- STYLESHEETS -->
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"
type="text/css" media="screen" title="no title" charset="utf-8" />
<script type="text/javascript">
function setText(obj){
$("#" + id).val("");
var id = obj.id;
$("#" + id).attr("type","text");
if(obj.value && obj.value.replace(/ /g,'') != 'Z'){
$("#" + id).val(obj.value +" Z");
}
}
</script>
</head>
<body >
<div data-role="page">
<div data-role="header" data-theme="a" data-position="fixed">
<a data-rel="back" class="hdrBtns" id="infoBtn">Back</a>
<h1>Employee Details</h1>
</div>
<div data-role="content" id="mainContent">
<div style="background-color: blue;">
<p class="contenthdrlbl"
style="background-color: blue; color: white;
text-align: left; line-height: 2.5; font-weight:
200;">Input
values for Employee</p>
</div>
<div style="height: 30px; background-color: white;" class="last">
<div class="ui-block-a"
style="background-color: #EBF4F8; line-height: 1.9;
text-align: center; width: 40%">
<span>Employee Id</span>
<p id="currency" style="display:inline !important;"></p>
</div>
<div class="ui-block-b ">
<input type="text" id="empid"
class="inputElement" placeholder="MANDATORY"
onfocus="this.value='';this.type='tel';"
onblur="setText(this);"></input>
</div>
</div>
<div style="height: 30px; background-color: white;" class="last">
<p class="ui-block-a"
style="background-color: #EBF4F8; line-height: 1.9;
text-align: center; width: 40%">Salary
</p>
<div class="ui-block-b ">
<input type="text" id="salary"
class="inputElement" placeholder="MANDATORY"
onfocus="this.value='';this.type='number';"
></input>
</div>
</div>
</div>
</div>
<!-- JQuery Mobile Page End Tag-->
</body>
</html>
No comments:
Post a Comment