Retain input focus in autocomplete on meteor js - javascript

I've added https://github.com/mizzao/meteor-autocomplete to a meteor js project and can get a list of available options. I'm using the arrow up- and down-keys to mark my entry and enter to select it. But then the cursor moves out of focus from the input field so I can't press enter again to submit the form. I have to click the button on the form to perform the submit.
html:
<div class="controls">
{{> inputAutocomplete settings=settings id="name" name="name" placeholder="Name" }}
</div>
I added focus to the js file but it only helps before I select an item from the list:
Template.raceAddParticipant.rendered = function () {
document.getElementById("name").focus();
};
How can I circumvent this?
regards Claus

(I wrote this package.)
I'm guessing you're using autocomplete in single-field mode. I implemented in this feature to prevent the popup menu from staying open after a selection was made. By default, the popup menu stays open whenever the field is focused (and there is a match), and the enter button makes a selection.
Do you have a suggestion for how this behavior could be improved? If so, perhaps you should open an issue on GitHub.

Related

Search field not clear for another list popup

I am using Devextreme module for a dxlist popup. I am able to open the popup and to show the list of items with a search input field but I have one more list popup. When I search in the first popup and close it, open the second popup, the search field text is not cleared.
<dx-popup class="popup popupMore" [width]="500" [height]="500" [showTitle]="true" title="{{popupdata.name}}" [dragEnabled]="false"
[closeOnOutsideClick]="true" [(visible)]="isVisible">
<div class="list-container">
<dx-list #list [dataSource]="popupdata.data" [height]="400" [searchEnabled]="true"
searchMode="contains" >
<div *dxTemplate="let data of 'item'">
<div>{{data}}</div>
</div>
</dx-list>
</div>
</dx-popup>
The above code is used in the html. Same popup will open for another two event.
Example:
I have three buttons. When we click on each button we need to open the same popup with different data. When we click on the first button, this list popup will open with a search option. I searched in the search field and closed the popup. Then clicked the second button, same popup will open with new data but the search input field is not cleared.
Could anyone please help me, how to clear the search field for the next list popup that opens?
Thanks in advance.
As mentioned in the comment above, the cleverest approach I could think of is registering the dxPopup's onShown event and, when fired, you may either:
Reset the list.instance searchValue option (using this.list.instance.option('searchValue','');).
Assign a two-way binded value to the dx-list component and reset that value. For that case, specifically, add [(searchValue)]="_searchValue" to the html dx-list tag, and add this._searchValue = '' in the dxPopup's onShown callback.

How to handle onclick event as enter key?

I added autocomplete places to a google map and have a FROM and TO input fields. The TO input has a fixed value, when the users choose an address from the suggestions and press the TAB or ENTER key it submit the route and works fine!
But when the user click on a suggestion, it doesn't show the route.
How can I handle the place_changed as a enter OR tab key?
The code in HTML:
<div id="controls">
<label><span>Van:</span> <input class="test" id="vertrek" type="text" name="from"></label>
<label><span>Naar:</span> <input type="text" id="bestemming" name="to" readonly></label>
</div.
In JavaScript I tried this:
google.maps.event.addListener(autocomplete, 'place_changed', function() {
document.getElementById("vertrek").focus();
return false;
});
It doesn't work, I don't know why because when I add a window.alert and select an item from the suggestion list it shows the alert.
I also tried to put the input fields in a form tag and change the .focus to .submit, it doesn't work also.
Shortly: I want to make it possible to handle the click on the suggestion list as a keypress (tab OR enter)
I didn't change anything..
The code works now, I think the api was overloaded that it doesn't work when I ask the question.

Direct user to input field, when button is clicked

I have a search icon. When this icon is clicked, a full screen search form pops up.
What I want, is when the user clicks on this icon and the search form appears, that the user goes directly to the input field. (that the focus is on this field, and the user can type away immediately).
(I have no idea how to formulate this correctly, so that might be why I could not find any question related)
Maybe this link from jQuery will help you out:
https://api.jquery.com/focus/
And the part of code inside the onclick event of search icon would be similar to this:
$(document).on("click","#searchIcon",function() {
$('#input').focus()
});
Hope it helps you
Simply use the HTMLElement.focus() method, you can read all about it in https://developer.mozilla.org/en/docs/Web/API/HTMLElement/focus
Example: http://jsbin.com/pezifilese/edit?html,js,output
It's simple, you just need to add the autofocus="true" attribute in your input field.
<input type="text" name="name" autofocus="true"/>
Check out the demo here.

html5 required attribute to fire jquery event

I am making a form in which I am using required attribute on its elements. Now consider the following situation-
The form is divided in two tabs say General Details and Additional Details. So while submitting the form if I leave the required field blank on the visible tab then user can view the message. But suppose user is on first tab and error comes on second tab then User cannot view the error popup and he is clueless about why the form is not submitting.
Now I am searching for a way a jQuery event can be fired, whenever the required attribute error comes.
So on this event I can program to show the tab on which the error comes.
Please note I know I can use the JS/jQuery based form validation but the main thing is that, this form is being generated by Grails and the required field is auto-applied depending on the database. So I cannot use per form based JS validation.
See how the required field is selected with the :invalid pseudo class:
jQuery(document).ready(function(){
jQuery('button').on('click',function(){
jQuery('input:invalid').css('background-color', '#F00');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="required test">
<input type="text" required="required" />
<button>click</button>
</form>
You could simply check for the fields visibility, and if not given traverse up to the parent tab, give the parent tab a class which marks the tab label as containing something invalid.
One way is to use submit button and call myValidationFunction() method of JavaScript as action. (action="myValidationFunction();").
Other way is to use button and call myValidationFunction() method of JavaScript as on Click event of that button. After that, inside myValidationFunction(), you can use checkValidity() method to check validity of form at once or particular element and run your custom code to shift on particular tab if there is error to show to the user. function myValidationFunction() {
if ( $('#myInput')[0].checkValidity() ) {
// code to move to the particular tab
}
}

How to get Next button on android softkeyboard in place of Go Button in phonegap

I am developing Phonegap application and have many inputs in application form. I am getting Go button on keyboard of android.I want to replace go button with next button. As clicking on Go button (as shown in image) submits form.
In android native we can specify next button in XML but for Phonegap how to specify next button in place of go button.?
Some Samsung devices have by default Next Prev button on top.
By Default there is Go button. I need Next but in Phonegap. is there any plugin for specifying that for android.
Having a "Next" button instead of "Go" is not possible with Android as of now.
Android will always display "Go" button for form input fields. "Go" is basically reflecting the same behavior as of an "Enter" button on a normal browser & keyboard. You can achieve through below code:
if (event.keyCode == 13) {
//Handling "Go" Button to move to next input field
}
OR
If your input fields are more, then data-dependency will be best solution.
If you want to prevent users from submitting the form, you can put required validations on the form using javascript, where you can specify data-dependency inside input field with required, which helps move cursor to a particular field which you specified in data-dependency.
<input type="text" id="first" data-dependency="second" />
<input type="text" id="second" data-dependency="third" />
<input type="text" id="third" />
It move focus to next fields in form until its your last field. Once last field reaches you can allow it to act as enter. So basically Go will keep moving focus to next fields until its your last field & then will submit the form.
Its been said that if have input fields without or outside the form tag means you will get next button as tab button
As far as i know there is no proper solution to get next button instead of go . There are only workarounds do it. Most common one is to capture the 'Go' button as enter key(keycode '13') in javascript and do your thing.
$('selector').on("keydown",function(event){
if (event.keyCode == 9) {
//you got tab i.e "NEXT" Btn
}
if (event.keyCode == 13) {
//you got enter i.e "GO" Btn
}
});
for tab button instead of enter
There has been also sources that already discusses these GO Vs NEXT button
have you tried the attribute enterkeyhint
The enterKeyHint property is an enumerated property defining what action label (or icon) to present for the enter key on virtual keyboards. It reflects the enterkeyhint HTML global attribute and is an enumerated property, only accepting the following values as a DOMString:
'enter' typically indicating inserting a new line.
'done' typically meaning there is nothing more to input and the input method editor (IME) will be closed.
'go' typically meaning to take the user to the target of the text they typed.
'next' typically taking the user to the next field that will accept text.
'previous' typically taking the user to the previous field that will accept text.
'search' typically taking the user to the results of searching for the text they have typed.
'send' typically delivering the text to its target.
If no enterKeyHint value has been specified or if it was set to a different value than the allowed ones, it will return an empty string.
The enterKeyHint property is an enumerated property defining what action label (or icon) to present for the enter key on virtual keyboards. It reflects the enterKeyHint HTML global attribute and is an enumerated property, only accepting the following values as a DOMString:
<main>
<h2>Using the <code>enterkeyhint</code> Attribute</h2>
<p>View this demo on a mobile device. Note the text in the "enter" key on your mobile device's virtual keyboard.</p>
<input type="text" enterkeyhint="Next">
</main>
You can simply use the following logic to let users focus on the next input field. This is a better approach, which I used in my one of the PhoneGap applications, as currently there are no 3rd party plugins which offer such functionality.
x$('#input1').on('keyup', function(e) {
var mEvent = e || window.event;
var mPressed = mEvent.keyCode || mEvent.which;
if (mPressed == 13) {
// On enter, go to next input field
document.getElementById('input2').focus();
}
return true;
});
For whom this may be of use:
I'm working on a react pwa and I was having issues getting the next button to show so users could move from one input element to the next (within the same screen). It turns out that android requires a <form> to be wrapping the input text elements. I did a series of tests:
input texts inside a (no tabindex, no attributes other than type, nothing)
input texts outside a (same as above)
input texts inside a inside a
input texts inside a outside a
Only those inputs inside a get android's default next-next-next-go behaviour where go = last input in the form.
Have you tried using the tabindex parameter on your input fields?
The default action of the keyboard should be to show next if tabindex is detected.
Example:
<input name="first" tabindex="1" /> //should show next
<input name="second" tabindex="2" /> //should show next
<input name="third" tabindex="3" /> //should show go
EditText android:imeOptions= "actionNext"

Categories

Resources