I have this page where i use the input type number. so that it will show the numeric keyboard on wp, android and ios device .
But my problem is that if the user use a culture info on the device for. lets say Denmark. the numeric keyboard shown use , instead of .
But the input number won't accept , only .
Anyone got a idea how this can be done?
Thanks for your time.
Try setting the lang attribute to en in the <html> element or the <input> element itself to force decimal point as input syntax. For example:
<input type="number" name="myNum" id="myNum" lang="en">
However the user's environment may even override this, in which case the only alternative would be to include a message requiring decimal point rather than comma.
This is a good write-up of locale handling for the number input type:
https://www.aeyoun.com/posts/html5-input-number-localization.html
UPDATE:
Another alternative would be to stop the form from validating the input by using the novalidate attribute in a <form> element, like so:
<form novalidate>
<input type="number" name="myNum" id="myNum">
<button id="submit">Submit</button>
</form>
This would allow anything, even non-numbers, so you'd have to set up the JavaScript code to check and handle the value.
UPDATE AGAIN:
Just thought of one more alternative — use the pattern attribute to do a regular expression check and use the plain old text input type. For example:
<input type="text" name="myNum" id="myNum" pattern="[0-9.]*">
Advantage: You get to control exactly what users can input.
Disadvantage: The keyboard on mobile devices will not be the numeric keypad.
Note that HTML input types can be spoofed so you still need to do server-side validation.
When retrieving the value with jquery it is returned with a . decimal separator. Try this:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<input type="number" name="myNum" id="myNum">
<button id="submit">Submit</button>
<hr/>
<code></code>
<script>
$("#submit").on("click",function() {
var numericValue = $("#myNum").val();
$("code").html(numericValue);
});
</script>
</body>
</html>
http://output.jsbin.com/xixunewowe
Related
The native date picker:
<input type="date">
on Android (Pixel 4a Android 11) does not allow the user to manually type the date. No matter where in the field I touch the date picker widget pops up instead of the keyboard.
Is there a way to allow manual typing via the keyboard ?
Is there a way to allow manual typing via the keyboard ?
Currently, no.
But, you can use a pattern + minlenght + maxlength:
The pattern of date explain here, and you try regex in regex101
var custom_input_date = document.getElementById('customInputDate');
custom_input_date.oninput = function(event){event.target.setCustomValidity('');}
custom_input_date.oninvalid = function(event) { event.target.setCustomValidity('Use a valid format: dd/mm/yyyy'); }
<form>
<input id="customInputDate" type="text" pattern="^(?:(?:31(\/)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/)(?:0[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/)02\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0[1-9]|1\d|2[0-8])(\/)(?:(?:0[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$" maxlength="10" minlength="10" autocomplete="off" placeholder="dd/mm/YYYY" required>
<input type="submit">
</form>
This may work:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
Some html tags are not fully functional depending on the browser of device. The code above may work. If not, there are certain frameworks that may be able to help you. I recommend trying to search around because this question has be asked multiple times and there are some reliable solutions out there. Another similar question: How to make the HTML5 input type 'date' trigger the native datepicker on Android?
I am designing a website. Dealing with an HTML page where a user enters decimal numbers. Let's say I will ask for their height and he has to enter it as 5.6 feet. The problem I am having is the input format on the Android keypad. My code for input format is:
<input type="number" lang="en-150" id="height1" name="total" value="" placeholder="In feet">
Now when the android keyboard appears it does not contains the dot(.) instead it just contains numbers 1,2,3,...,9,0. So user can't enter 5.6 instead 56.
I have also used:
type="number" lang="en-150"
and:
type="number" step="0.01"
and:
type="decimal"
Despite all, the keyboard is still simple. I have also checked stack flow and codes on other forums but nothing helps me out.
You can do this with:
<form action="">
<input id="height1" type="text" name="total" pattern="[0-9]+(\.([0-9]+)?)?" value="" placeholder="In feet">
<input type="submit">
</form>
However, the user can insert any character after the validation
To solve this, you will need use javascript and check before any keyDown click
Using input field type='time' - when open the page with chrome on android and the phone language is set to Hebrew, the field is displayed fine, but when I try to set value, the inner fields are in reversed order (i.e. the hours in the right side, the minutes on the left). Is it solvable?
Simplest code to reproduce:
<!doctype html>
<html>
<head>
<title>
input type=time example
</title>
</head>
<body>
<input type='time' value='13:55:00'>
</body>
</html>
link to screenshot: http://www.ddc.co.il/wordpress_heb/demos/stam_input_time.jpg
In a browser, if I want to submit a form containing a username and a password input, I only need to add an "action" attribute and set the "method" attribute to "post":
<form method="post" name="form" action="https://www.xxx">
<input id="username" type="text" value="xxxxxx" name="username">
<input id="password" type="password" autocomplete="off" name="password">
<input type="submit" value="submit" >
</form>
then the browser will handle the post and concatenate the password and username as the request and send to the server.
My question is: in the webkit (what I concern is the Android webkit, but I think others will be ok)，where is the code of handling such process? Can I find the code that get the text from the input element, concatenate them, and then send to the server?
Thanks
where there's no answer, I finally find it.
For webkit, there's mainly four directory we need to consider in android:
for java part:
framework/base/core/java/androud/webkit
for native c part
external/webkit/Source/WebCore
external/webkit/Source/WebKit
external/webkit/Source/JavaScriptCore
for the form submit, the java part webkit will send a key event which will be handled by C WebCore.
we can see the code from
WebCore/html/HTMLFormElement.cpp
WebCore/loader/FormSubmission.cpp
WebCore/loader/FrameLoader.cpp
I'm displaying a standard <form> with a few <input> fields in a web view.
When editing the first input field and pressing the enter key on the soft keyboard, the form is posted insted of focusing the next input field in the form.
How can I stop the form from being posted and instead put focus on the next input field?
Edit:
Problem solved by adding a piece of javascript to the page;
<body onkeypress='return event.keyCode!=13; '>
If you're trying to wire up an "OnClick" event in your Java file - I don't think it's possible. The "WebView" control just displays CSS/HTML/JS (i.e. web pages).
You should be able to use a javascript snippet to accomplish this though. Something along these lines:
<html>
<body onkeydown='if (event.keyCode==13) {event.keyCode=9; return event.keyCode }'>
...
</body>
</html>