Navigate between text fields using javascript and two arrows icons - javascript

I'm looking to make 2 arrows (Up & Down buttons). Both are .gif. the thing is:
I have form with 4 text fields. How do I make it so that when I click the Down button.gif I navigate to the next text field then if press again I navigate to another field, and if I press Up button.gif to navigate up to the previous field like with a keyboard using arrows but instead using 2 images up & down.
How have to be the javascript function for this?

If you add the attribute tabindex to the different input fields you can access them with document.querySelector('input[tabindex="1"]') (replace 1 with current field tabindex) and call .focus() on them.
Basic example: http://jsfiddle.net/xc2n7/

Related

valueHelpOnly for smart filter bar in sapui5

I have included smartFilterBar:ControlConfiguration control in Smart Filter Bar. One of the controls has F4 value help. In this control, I can enter some text manually also. How can I disable entering the text and display value help dialog only on click of that filed. In short I want a feature similar to "valueHelpOnly" in Input field which disable manual entry of data.
Programatically you can do it in a following way:
myControl = this.getView().byId("smartFilterBar").getControlByKey("myControl")
myControl.setValueHelpOnly(true);
After that, clicking on selection field will automatically open the value help dialog.

How to manually focus to next input field with jquery virtual keyboard?

I am using jquery virtual keyboard in my page. i have two input boxes. On my page load i manually focus the first input field. so that virtual keyboard enabled. on pressing VK Tab in focus to next input field. so far fine. But as per new requirement when the user enters 8 characters in the first input field then the focus should move to next input field. I tried adding the condition in the virtual keyboard button click event and set $('#nexIPField').focus() but not working as expected. How to achieve this?
What i am thinking is manually trigger the tab key event solve the problem. If it is right how to trigger the tab key event?
One way to do this would be to associate an onchange event on your textbox.
Call a function on change to check the number of characters which have been typed. Once it reaches 8, trigger a focus on your next sibling.
<input type='text' onchange='checkChars()'/>
Javascript:
function checkChars() {
//take length of that input field and check for 8
$(this).next().focus();
}

JAVASCRIPT- iOS keyboard "prev","next" active/inactive

I have two text fields (input type="text") say #tb1,#tb2
Now the second textbox appears only if I enter a particular string in the first text box (some serial number)
Now I'm accessing the web application with an iPad so when I tap on the first text field the native iOS keyboard pops out. With "prev" (active) & "next" (inactive) on top of the keyboard.
Now when I enter the correct serial number in the first text field, the second text field appears. But the "next" button in the iPad keyboard is not in an active state. I need this because after the user has entered the correct string in the first text field he will tap on the "next" button which will bring the focus on the second text field for the user to enter data.
Is there any way in Javascript to tell the native iOS keyboard that the 2nd text field is now visible & enable the "next" button. In other words can i refresh the native iOS keyboard "view" when the 2nd text field is visible.
I did some Googling and found that to call/dismiss the iOS keyboard in objective-C can be done by:
becomeFirstResponder [myTextField resignFirstResponder];
Not sure how this thing works in objective C.
I'm looking for a javascript solution to refresh the iOS keyboard so that when the 2nd textfield is visible the "next" button is active and vice-versa.
Any other JS/iOS solution is also welcome.
You can simply focus on the second field after it has become visible and the first one was filled. That's no brainer with JQuery, and the iOS browser will happily enable the "back" button on the keyboard when you auto-focus on the next field:
window.onload = function () {
$('#tb1').keyup(function(evt){
if(evt.target.value == 'CORRECT_SERIAL_NUMBER') {
$('#tb2').show();
$('#tb2').focus();
}
});
};

force the focus to leave a form field with jQuery in iOS when selecting non-input element

Using jQuery or something similar, is it possible to detect when a user has clicked away, effectively removed focus, from a form field in iOS? I have conventional form which has a first name, last name, address line 1, address line 2 etc.
On an iPad when you select a form field the only way to leave that form field is to select another field in the form by clicking it or by hitting the Previous or Next buttons in the keyboard pane.
As the keyboard pane is shown clicks to other non-input elements on the page are ignored, so focus remains on the form field.
Is there a way with jQuery/JavaScript (or anything else) to force the focus to leave the form field if I click away from it by clicking a non-input form element?
Here's an example of what I mean. In the screen below, when the focus is on the Line 1 element I can't move out of it by clicking a non-input element.
Try just doing a quick blur() on the form, that might work.
$('body').on('click', function () {
$('form').blur();
// And since you said selecting an anchor might help, potentially doing a:
$('a#whatever').blur(); // might do the trick too
});

iPhone Trigger keyboard in input field (HTML / Javascript)

I am trying to set a few input field connectd to each other.
in the 1st field you can enter 3 digit
in the 2nd field you can enter 3 digit
in the 3rd field you can enter 4 digits
When i the first field as 3 digits, i would like to have the focus move to the 2nd one and same for the moving to teh 3rd one.
Using not so smart javascript it ie working, however on iPhne there is an issue: whene the focus is moved to the 2nd field, althouth i manage to create and trigger different events on eh field, the on screen keyboard do not want to reappear.
I tried to use simple focus() method.
Then to create and dispatch focus event, click event touchstart event, touch end event but i di dnot manage to figure out how to make the browser show the keyboard.
Is there anyone out there with an idea how to do this?
HELP
Thx
Daniel
An element.focus() should show the keyboard. You must be doing something wrong. Additionally if all your input / text areas are in a form element it should auto advance to the next element. You can also use element.blur() to hide the keyboard.

Categories