Develop Reference

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.

Jquery on click not working when focus is in a text box

I am creating a suggestion box below a search box. I want it so that when the user has focus in the search box, and then clicks on one of the suggestions, it triggers an action. I have tried using jquery's on:
$(".searchbox + div").on("click", "a", function() {
$(".searchbox").val($(this).html());
});
My HTML structure is like this:
<input type="search" placeholder="Search" class="searchbox">
<div></div>
The links are dynamically inserted inside the div that follows the input.
The links do not have an href value, so they are not really links, I just want them to act like links.
When I click on one of the links, the searchbox loses focus, and, because of the css I have, the links get visibility:hidden. I think the searchbox loses focus before the link action is triggered, so it never is triggered. How could I get around this?
You can see it here.
Clarification: What I think is happening:
User clicks on link
Computer thinks, The user just clicked outside of the search box
Search box becomes blurred
CSS sees that search box is blurred, styles say to now make the suggestions visibility:hidden
Now the links are no longer clickable, so the event is never triggered.

Somewhere in your code you have a click handler that brings the search bar to the top and the rest of the UI into view. It executes when the user clicks anywhere that's not the search bar. You should add a statement that checks if the clicked element was an <a> element in the suggestion box.
So if this is the click handler. Also i think it's time to add an id to your suggestion div.
$(document).click(function(e){
var $clicked = $(e.target);
if($clicked.tagName == 'A' && $clicked.closest('#suggestionDivId').length>0)
$(".searchbox").val($(this).html());
else if(click was outside searchbar)
//move searchbar up and show UI
else
//click happened inside searchbar, do nothing.
})
I'm not sure why nobody understands your question, or why this question is being downvoted. It's a perfectly valid question.
EDIT:
I suggest wrapping the input and suggestion div with another div. Give this wrapper an attribute of tabindex="-1" so it can receive blur/focus events.
<div id="wrapper">
<input type="search" placeholder="Search" class="searchbox">
<div></div>
</div>
Then change your $(".searchbox").on("blur") to $("#wrapper").on("blur")
This way you can click anywhere in the suggestion box without the blur firing.
Alternatively, the mousedown event fires before the blur event. So try this maybe
$(".searchbox + div").on("mousedown", "a", function() {
$(".searchbox").val($(this).html());
});

You can use some plugins for that. Its too easy. For example if you work with any front framework like bootstrap, you can use typeahead.js plugin

The URL will be appended with a question mark as the user press enter

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&param2=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?

Unable to ng-hide elements

In my mini-project here, I need to hide the Shop button and the Content div when the user clicks on the textbox. I am attempting to do it using ng-hide.
For some reason there is an error with the module.
Error: error:nomod
Module Unavailable
I was able to partly get it working here, but I need to hide the elements when someone clicks on the textbox, before they start typing.
I need to get this working in Firefox only.
What am I missing?
jsFiddle

I've changed your code a bit. You can try this out:
<input type="text" name="hideBasicInfo" ng-click="hideBasicInfo = true" />
<div ng-hide="hideBasicInfo">
When someone's press the textbox I'll set the property hideBasicInfo true. (via ng-click)

Making a text field uneditable and not just readonly

When i click on a textfield, i get a dropdown so the user could select a value from the list.
After the user selects the date from the dropdown, he/she could edit the date by even adding characters to it. So i want to find a way to prevent this. I thought of making the field un-editable. So i used readonly but, this prevents the user from clicking and displaying the list. So can someone tell me how can i make the field uneditable.
<input id="datePiccc" type="text" class="dates" />

You can use the below code. This will make the text input field clickable but when the user types in anything, nothing would happen.
document.getElementById('datePiccc').onkeydown = function(e){
e.preventDefault();
}
Fiddle Demo
As pointed out by nnnnnn, onkeydown is a better option than onkeypress as it would stop the delete and backspace key functions.
You could add the below also to your code to nullify Cut and Paste events1. (Note: Not doing anything for Copy as that operation isn't going to change the value of the text field).
document.getElementById('datePiccc').oncut = function(e){
e.preventDefault();
}
document.getElementById('datePiccc').onpaste = function(e){
e.preventDefault();
}
1 I think these should work in all browsers. Currently tested in Chrome 31, Opera 15, IE10 and FireFox 24. (Note: In IE10, there is an x mark which appears on the right side of the input field which when clicked clears the entire field value. Could not find a way around this.)

I'm assuming the text field is being set in javascript. If so, you can use the following line to disable the field:
document.getElementById('datePiccc').disabled=true;
The input will remain as it is and the value from the selection field can also be set.

Disable the input in JQuery as
$("#datePiccc").attr("disabled", true);
And in pure JS
document.getElementById('datePiccc').disabled = true;
May be this can help!