How to handle enter key in Javascript overlay? - javascript

I have a JavaScript overlay that consists of several input text search criteria. When the user presses the enter key in any of those inputs, I want to mimic the behaviour of the search button.
I know how to handle the enter key if there is only one input. I define the input as:
<input type=\"text\" class=\"txtOrgNmFilter inputBox\" onkeyup=\"ClientsListControl.onFilterKeyup(event);\" />
and in the onFilterKey up
onFilterKeyup: function(event) {
if (event.keyCode == 13) {
$(".txtOrgNmFilter").click();
}
}
My question is as follows: if I have several input texts, do I need to add the onKeyUp attribute in all of them or is there a simpler way (similar to a form submit action)?
My overlay is a table

$('input').bind('keypress',function (event){
if (event.keyCode === 13){
$(this).trigger('click');
}
});
With this you can bind the same event to all inputs (you can filter more if you want) and when someone clicks 'enter' with the focus on some this inputs, it will trigger the 'click' event.

Attach the event handler to the container (the table). Then you can get the element that the key was actually pressed in (in prototype.js, use Event.findElement, but I'm sure other libraries have similar methods) and make one lot of logic depend on both that and the key pressed.

Can't you just include a form element, in which you define your inputs? This way, the browser will by default submit the form when a user presses Enter in one of the input fields.
And if you want to handle the search by yourself (e.g., using AJAX), you can catch the submit event of the form and perform the desired action. Doing so your form will still work if JavaScript is unavailable one way or another.

Related

While working with Oracle ADF how can I manage to detect the pressed key over a specific input text

Looking for a simple and clear way to detect when a enter key was pressed over an input text in order to be able to perform the move to the next input field and get triggered the validation related events.
After several attempts I found the answer.
It is necessary to add a couple of tags within the input text source code tags, one for the Javascript which will be triggered by onkeypress and another one for the clientlistener which will "attach" the defined Javascript function to the specific input text.
Tested on Jdeveloper 11.1.2.1.0, this will cause a tab-like behaviour if the enter key is pressed, useful to manage an input from a barcodescanner which cannot be programmed to send a tab keychar after the reading
<af:inputText> .... [here you will have several tags and attributes, just start to write before the closing tag for your inputText]
<af:resource type="javascript">
function takeEnterAsTab(componentEvent)
{
var evt = componentEvent.getNativeEvent();
if (AdfAgent.AGENT.getKeyCode(evt) == 13)
{
AdfFocusUtils.focusNextTabStop(componentEvent.getNativeEventTarget());
}
}
</af:resource>
<af:clientListener method="takeEnterAsTab" type="keyPress"/>
</af:inputText>

What event to know when user has entered data into form?

I have a HTML form. I want to enable/disable a button until user eneters text in one of the fields. I am adding an event attribute to the which triggers some javascript. This javascript will enable/disable the button.
Problem is I can't figure out what event attribute to use. What event attribute please will trigger as soon as user enters data? I tried onchange but that only gets called when i clicked back outside the text area. So it may aswell be onblur.
You can use the input
function activateForm (event) {
if(!this.value == ""){
}
}
var input = document.querySelector(".myInput");
input.addEventListener("input", activateForm , false)
There are 2 possible events that can be used: either onChange or onKeyPress. onChange will trigger when the value of an input has changed while onKeyPress will trigger every time the user types something in a text box. The onChange triggers once the user has CHANGED something in the value, and got out of the input focus. That means the user has to hit TAB or click somewhere else for the event to trigger, hence why onKeyPress might be better suited.
Read more:
http://www.w3schools.com/jsref/event_onchange.asp
http://www.w3schools.com/jsref/event_onkeypress.asp
Younger browsers also support onInput which should certainly be prefered for now, if you do not need to support older browsers.

Jquery Chosen - Prevents capture of keypress

I have a div (id = div_search_fields) within which I have several jQuery Chosen dropdowns. Attached to the div I have a keypress capture listener which, if the key pressed is the Enter key, submits the selected stuff by clicking a hidden submit button.
$("#div_search_fields").keypress(function(e) {
if (e.which == 13) {
$("#hiddenSubmitButton").click();
}
});
For some reason this listener is never called if I have just selected an option in one of the chosen dropdowns. Within the "div_search_fields" DIV I also have a simple text input box and if I have just entered text there and then press the Enter key, the listener is triggered as expected.
This must be something to do with focus on the Chosen dropdowns but I cannot fathom why? Any ideas?
As Far I can see Jquery chosen is using e.preventDefault() in keypress event so it is not allowing to execute your code. There should be some function which you can override to achieve your goal or you can get ride of e.preventDefault().
Two things:
If the input in the dropdowns is generated dynamically AFTER the keypress event is bound, the event won't be bound to those elements.
IDs should be unique to one element. Use a class instead if you want to bind an action to multiple elements.
Use .on() instead:
$(".div_search_fields").on("keypress", function(e) { . . . });

type any key on page into search field

We're hoping to detect a keypress and the key from a user typing outside of a form field. And append that key to the form field and focus the user back into the form field. Essentially, hijacking any and all key events, and using placing them in a form field.
Any help would be greatly appreciated. We're happy using jquery for this type of client-side JS. We've gotten as far as detecting the keypress events, but focusing and appending that key to a particular field on the page is a bit beyond us.
Listen for keydown on window.
var input = $("input");
$(window).keydown(function(e) {
input.focus(); // focus the input
input.val( input.val() + String.fromCharCode(e.which));
return false;
});
You may need to tune this code up, but you'll get the idea.

HTML input box without a form

I need to have an input box in a div without a form and when the user enters something and hits return, it should run a Javascript function.
There will be no submit button.
How can I do this?
To get an input box without a form, I would suggest just not using a form.
You will have to attach a onkeypress event and check if enter was pressed (and rune the code if it was). Tell us if you are using plain JavaScript or some library if you need examples.
It can be simply done with the help of a form as follow... i think adding form would provide great stability
<form onSubmit='alerttest(this); return false'>
<input type="text">
</form>
<script language="javascript">
function alerttest() {
alert("Executing jolly.exe !!!!");
}
</script>
Don't use the form tag. You can easily use JQuery to tie the code to the input control's key press events.
If you are unfamiliar with JQuery, just tie the code directly to the input field key press event.
To run a function when the user presses enter when focused on the input field, the easiest way would be to have the form tag and run the function using the form's onSubmit event (because pressing return when focused on an input field submits the form).
If you nevertheless don't want to include the form tag, you can use the onKeyPress event to catch the return key pressing and call the function from there.

Categories

Resources