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>
Related
How to get value from html from webview using getelementbyid.
I tried several different solutions. I tried with jsoup but i cant reach targeted page becouse user need to be signed in to get to page.
This is input form, i need value data from form
<input class="form-control" id="coupon_code" name="" size="50" type="text" value="https://app.webexample.com/invite?coupon_code=6f7c0f">
also i tried to implement #JavascriptInterface but it does not work
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
I am trying to develop a shopping cart system using kendo-ui mobile and phonegap. First I am listing all the items in a list view. In each listview item, there will be one plus button, minus button and a label.I am using this combination for selecting the quantity of items.So, if we click plus button, the label value should be 0+1=> 1 and when we click minus, it should be like 1-1=>0 .To change the value of label when clicking button, I am passing the id of label to change the corresponding label value. But I am not able to pass the id form html to javascript, like I do in web development. Here is my code,
My listview item template,
<script type="text/x-kendo-tmpl" id="endless-scrolling-template">
<div class="product">
<img src="images/image.jpg" alt="#=ProductName# image" class="pullImage"/>
<h3>#:ProductName#</h3>
<p>$#:kendo.toString(UnitPrice, "c")#</p>
<a id="minus" data-role="button" data-click="minus(#:ProductID#)" >-</a>
<label id=#:ProductID#>0</label>
<a id="plus" data-role="button" data-click="plus(#:ProductID#)" data-name="plus">+</a>
<a id="loginButton" data-role="button" data-click="login">Add to Cart</a>
<div class="console"></div>
</div>
and my javascript functions,
<script>
function plus(itemid) {
var quantity=document.getElementById(itemid).innerHTML;
document.getElementById(itemid).textContent = parseInt(quantity)+1;
}
function minus(itemid) {
var quantity=document.getElementById(itemid).innerHTML;
document.getElementById(itemid).textContent = parseInt(quantity)-1;
}
</script>
Can anyone please tell me what Iam doing wrong here? Or can you provide an alternate solution?
When using Kendo, you can use Kendo MVVM. When JS objects are wired up in views using Kendo MVVM, when the value of the input elements change, the value of the JS objects reflects the change automatically. So what you need to do is to create a JS model for your view and set it as your view's model using data-model="yourModel". See this link: http://docs.kendoui.com/getting-started/mobile/mvvm
In your scenario here I think this link will help you: http://demos.kendoui.com/web/mvvm/source.html
This behavior is explained in the Kendo mobile book I wrote and you can see the checkout screen of the sample application built for the book here: http://movies.kendomobilebook.com/
Having trouble with the soft "NUMERIC" keyboard on my android/phonegap application.
My goal: create a simple form on a html5 page (that I will use with phonegap), where the user enters a number using 0-9 characters. To do this, I have used an input field with type = number, and this generates the correct soft keyboard on my android phone.
Unfortunately, I've felt a huge amount of frustration trying to detect when the enter key is pressed on the numeric keyboard. Usually when pressed, instead of submitting the form, the keyboard just goes away. However, if I change the type of the input to "text" then the enter key works as expected and submits the form.
How can I reproduce form submission using the numeric keyboard?
For reference see:
http://jsfiddle.net/Ua9yw/13/
WORKING ENTER SUBMISSION BEHAVIOR:
<form> <input type="text"/> </form>
<form id="form1">
<input type="text"/>
<input type="submit"/>
</form>
NOT WORKING ENTER BUTTON BEHAVIOR:
<form> <input type="number"/> </form>
<form id="form1">
<input type="number"/>
<input type="submit"/>
</form>
You can detect the next keyboard press by using the following bind in JQuery:
$('input').on('keydown', function(e){
if(e.which === 9) {
//your code here
}
});
The next button emulates the tab keypress event on a keyboard, which is key code 9. Unfortunately, keypress and keyup events do not detect the next key event, so you need to bind it on keydown.
I have html form with two input fileds and submit button.
When i click on submit button it goes in my javascript function...but it does not call the ajax function written in it.
Instead of calling ajax function the page gets reloaded
You not only have to use event.preventDefault() (or return false) in your event handler but you have to specifically disable the AJAX navigation for the form so jQuery Mobile doesn't do it's own form submission:
Here is one way using data-ajax (recommended):
<form data-ajax="false">
You can also do this by changing a default of jQuery Mobile when the mobileinit event fires:
<script src="jQuery-Core.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});
</script>
<script src="jQuery-Mobile.js"></script>
Notice the order of the <script> tags. The downside to this method is that it disables AJAX navigation for all elements, not just the single form you're dealing with, that's why I recommend using the data attribute: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/globalconfig.html
have you disabled your form submit action using
e.preventDefaults()
can you show some of your code ?