Jquery masked Input v1.4 issue with Samsung Android device - android

I'm facing an issue with jquery-masked-input v1.4 plugin.
I have a input field:
<input type="text" id="phone" placeholder="(999) 999-9999" />
and have applied the mask to it:
<script>
$("#phone").mask("(999) 999-9999");
</script>
It works perfectly on all devices ranging from desktops, mobiles (all iphones, androids) except for Samsung Android Devices.
What it does on these devices is when I try entering the numbers, it would enter only one digit and immediately the text keypad would open. Then when I try entering the numbers again, it would not show properly. Eg.
I want to enter : (989) 942-0827
What I get : (898) ___-__9
and the text-keypad keep opening up while I try to enter the numbers.
Please suggest any workaround. Thanks in advance.

This is very old, but thought I would post anyway...
Im not 100% sure I understand your issue, but try changing the type to number. This should force the number pad at all times, and not show the text keyboard
<input type="number" id="phone" placeholder="(999) 999-9999" />

Related

Show Decimal Keyboard in ReactJS for iOS

My application is ReactJS. I am using WKWebview on iOS.
I am using number format react-number-format for input.
This component not supported(type="number"). You can use only "text,tel,password" type.
<input type="number" pattern="[0-9]*"/> I can't use this.
So, I wrote the following code.
<NumberFormat id="numberFormat" decimalSeparator="," thousandSeparator="." inputMode="decimal" pattern="[0-9]*" .../>
Android device screenshot:
Its correct for me.
IOS device screenshot:
Its wrong for me.
I want to see ",(comma)" on the keyboard(decimal pad)
Kindly review and give feedback.
I solved my problem by adding the following line of code.
<NumberFormat id="numberFormat" decimalSeparator="," thousandSeparator="." inputMode="decimal" pattern="[0-9],*" .../>
But IOS Safari supporting version 12.2 or higher on inputMode="decimal" .
Thanks.

How to remove seconds of HTML5 input type time

I'm developing HTML5 app for both Android and IOS and encountering some sort of buggy issue.
What I want to achieve is to get HH:MM format of <input type="time">
According to W3C
http://www.w3.org/TR/html5/forms.html#time-state-(type=time)
Default attribute of step is 60s. This means users would never be able to select seconds without any extra attributes and The timepickers of both IOS safari(IOS7/8) and Android(jellybeans - lolipop chrome latest) works as they are expected.
The problem is that Chrome's input displays HH:MM:SS instead of HH:MM. even though SS never get any value but 00
Is there any way to remove SS part?
Edit
This issue is only on Android's Chrome.
JSfiddle : http://jsfiddle.net/yymvLk9a/
thanks in advance
I got a solution for this.
html
<input id="foo" />
js
$("#foo").on("change",function(){
$(this).attr("type","text");
});
$("#foo").on("touchstart",function(){
$(this).attr("type","time");
});
display the value as type="text" and change the type before keyboard shows up.
simple but works great for me.
EDITED
I reported this bug to google.and got confirmed and fixed.
This bug will be disappeared next update.
https://code.google.com/p/chromium/issues/detail?id=459966
If you're getting the time from MySQL you can use
$sql = "SELECT *, TIME_FORMAT(PickupTime, '%H:%i') AS PT FROM Trips WHERE TripID=".$tid;
then when filling the form
type="time" id="pickuptime" name="pickuptime" value="<?php echo $row['PT']; ?>"
This seems to present in Firefox as HH:mm without seconds

Android done/go/enter does not fire any DOM event in Cordova

The Issue:
Using
<input id="my_tel" type="tel" onkeypress="alert(event);"/>
<input id="my_num" type="number" onkeypress="alert(event);" />
The issue is that pressing done or enter or go key in android, nothing happens.For all other keys it works fine. When i tried to alert what event is being fired i found none.
The keypad does not hide (which is very sad) on pressing go/enter/done button.
However using
input type="text"
the issue does not exist.
Here is what i tried :
A. Used input type="text" and do not allow user to enter anything except
numbers.
Problem with this approach : The user is always presented with the default textual keyboard, and she/he has to switch, from default text to number pad,
which is not elegant and a turn off as i have many such pages in my project.
B. Used events like 'touchstart'and 'touchend' but no luck.
C. The input box is not even losing focus on key press so the solution
html phonegap android : numeric soft keyboard has next instead of go button is not useful.
Possible solution :
We can use the SoftKeyBoard plugin (https://github.com/phonegap/phonegap-plugins/tree/master/Android/SoftKeyboard). And hope that this problem is solved by this. But seriously can't there be a better solution??
Note : The problem is not observed in the iOS app,just android.
Another Note : No DOM event is fired even on pressing backspace key, but atleast the the backspace key is doing its job. In my case the done/go/enter key does not seem to execute its default behavior.
are you using iScroll?, if you are try removing it for a quick test and see what happens. I use it on a phonegap app and it's doing strange things with the inputs.

Tel input doesn't fire event on return

I'm developing a Phonegap application on Android & IOS.
I can't find a solution for the following case.
I have a single field form to get zipcode (4 char length in my country). To get the numeric keyboard without thousand separator I used the next hack:
<input type="tel" name="myName" maxlength="4" pattern="[0-9]*" />
My problem is that I'm unable to hide keyboard without tap outside the field (to blur).
The "return" key isn't catchable (I can catch it with a text type but not with tel or number).
I know that forms fields (& related features) are really buggy on Android (as a lot of others stuffs in webviews).
Which hack could you suggest me to handle my problem?
In Android Use this line before setContentView(R.layout.main);
this.getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);
Definitely you will solve your problem.
[Update]:
The workaround that work for me:
<input id="locator_zipcode" name="locator_zip" type="tel" pattern="[0-9]*" size="4" maxlength="4"
onkeyup="
if(isAndroid()){
if($('#locator_zipcode').attr('value').length==4){
setTimeout(function(){
$('#locator_zipcode').blur();
},500);
}
}"/>

Placeholder text for an input type="number" does not show in webkit ICS

I have the following input field
<input type="number" id="zip-code" placeholder="Zip code" />
Placeholder is shown in normal browsers except android 4.0 and above and the width also get reduced compared to other fields.
What could be the error?
It's a known bug in the default Android Webkit browser. As per this QuirksMode page, you can see that many versions of Android suffer from this. Chrome for Android on the other hand, doesn't.
I've created a simple JavaScript shim (fix) for this. First, read this question How to display placeholder's text in HTML5's number-typed input, then if you still want to use a placeholder like that, checkout my solution gist.
TL;DR;
Leave your markup as you would expect;
<input type="number" placeholder="Enter some numbers" />
Then run either of these scripts after the page has loaded;
// jQuery version
$("input[type='number']").each(function(i, el) {
el.type = "text";
el.onfocus = function(){this.type="number";};
el.onblur = function(){this.type="text";};
});
// Stand-alone version
(function(){ var elms = document.querySelectorAll("input"), i=elms.length;
while(i--) {
var el=elms[i]; if(el.type=="number"])
el.type="text",
el.onfocus = function(){this.type="number";},
el.onblur = function(){this.type="text";};
}
})();
By using type = "tel' instead of type = "number" the placeholder is displayed and the numeric keyboard is opened on focus.
I had the same problem and my solution was setting the 'type' field as text. I think it happens because of the type property. Your placeholder text is not a number! If you have to force user to use only number format, you may use javascript plugins for this and i did it like that :)
try this:
<input type="text" pattern="[0-9]" id="zip-code" placeholder="Zip code">

Categories

Resources