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.
Related
I am trying to reverse engineer a work website to allow me to use a JS script no jquery to enter the details for me in a form.
I have saved the HTML on my desktop, pointed all the src files to the right places, now I am creating the script to autofill by using document.getElementById & .click and entering strings into input boxes no problem.
The problem is that there is some kind of Data Validation on one of the boxes in the form of a JS Event, like click, input and Keypress.
This is no problem when I manually type the details in the input boxes no problem, but when JS does this for me it doesn't trigger and doesn't allow me to move on.
Is there another way I can trigger this event without me clicking the input boxes? I can't edit Index.js for reasons.
Input box
<input _ngcontent-c4="" class="input-cust-style-orderForm ng-touched ng-dirty ng-valid" type="text" id="order_id_restrict" placeholder="Enter Reference Number" required="">
It has, Click, Keypress, blur, compositionstart & end, ngmodelchange and there are about 4 other input boxes with the same events.
My code has things like:
//click the first li in the dropdown list
document.getElementsByTagName('input')[0];
document.getElementsByTagName("ul")[0]
.getElementsByTagName("li")[0].click();
var cpName = document.getElementById('cp_name');
cpName.value = 'something something'
Can I trigger events that are already on the website by calling them somehow?
I am trying to attach a click handler on an input, but for some reason it doesn't work for first click on inputs that get autosuggestion in safari. All other clicks after the first one work. So for example if an input has a name or label before it saying First name, Last name, Email or anything similar Safari will put a suggestion widget at the end of the input and suggest my information that is in Keychain Access I guess. Click event will not trigger the first time I click on that input, after the first one it triggers ok.
Here is the code that produces this issue. Basically I need a way to trigger a click event on inputs every time it gets clicked (preferably vanilla js, but jquery would be ok too).
HTML:
<form>
// Click on this input doesn't trigger the first time I click it because Safari has a suggestion widget for this input
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="you#example.com" data-input="">
// Click on this input triggers every time I click it with no issue
<label for="address">Address</label>
<input type="text" class="form-control" id="address" placeholder="1234 Main St" required="" data-input="">
</form>
JS:
var inputs = document.querySelectorAll('[data-input]');
var myFunction = function(event) {
console.log('Clicked');
};
for (var i = 0; i < inputs.length; i++) {
// I put this console.log here to see if all of the inputs pass through this for loop to get the event listener and they do
console.log(inputs[i]);
inputs[i].addEventListener('click', myFunction);
}
EDIT: even though #gopigorantala's link in his comment might be considered duplicate, I am not looking for the same thing that question is looking for. That question asks for a way to disable safari autosuggestion feature on inputs, I am looking for a way to detect clicks on inputs despite autosuggestion being there.
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.
I have an input tag within a form, when I press enter in the input box. The url will be appended with a question mark.
code:
<form>
<input id="xyz" type="text" value="">
</form>
This is very annoying, so I add some code to prevent the user from doing this behaviour. I change the body tag to:
<body onkeydown="(event.keyCode==13) ? 0 : 1">
Well, this works in another webpage, but not in this case.
What have I missed?
And is this a good solution to prevent user from pressing enter on the keyboard?
Please give some explanation in your answer, thanks.
p.s. I can't use jQuery.
UPDATE: I don't want the user to enter press on their keyboard to submit a form even I define the form action and method.
The default action when you press enter while in an input is to submit the form. Since you don't have any action defined for the form, it doesn't do anything. You also don't have a method defined so I believe it defaults to GET which uses parameters in the URL (like example.com?param1=abc¶m2=123).
If you change <form> to <form method="post">that should stop the question mark from appearing. Though it's still not valid HTML because you don't have an action or a name for your form.
May I ask why you don't want them submitting the form when they press enter?
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.