Jquery Chosen - Prevents capture of keypress - javascript

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) { . . . });

Related

How to change text based on textarea length

I added the following code, and I am getting the text to update, but only when clicking outside of the textarea.
$('.form__input-el').change(function() {
$('.form__character-indicator').text($('.form__input-el').val().length);
})
Why is this happening and how can I make it update without clicking outside of the textarea?
you you can use keyup if you want to get change the output immediately
$('.form__input-el').keyup(function() {
$('.form__character-indicator').text($('.form__input-el').val().length);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="form__input-el"></textarea>
<div class="form__character-indicator"></div>
Try with input instead of change this will trigger everytime the user inputs something.
according to jQuery docs: For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus
This is why your event appears only on leaving the textareas focus.
https://api.jquery.com/change/
a complete list of the events can be found here:
https://api.jquery.com/category/events/
so you need to use another event, maybe like:
https://api.jquery.com/keydown/
Use a keyup event to update your character count while the user is typing
Try something like this
$('.textarea').on('keyup', function() {
var newCount = $(this).val().length
$('.count').html(newCount)
})
Here is a jsfiddle

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.

Detect when user presses tab on first or last form element (in div)

I have an HTML form spread across several divs. I need to know when the user presses the tab key when they are on the first or last element within each div (so I can apply some custom tab functionality). For the first element in the div I'm looking for Tab+Shift; for the last element I'm looking for Tab only. The elements could be textboxes, textareas, radio buttons, select lists, or check boxes.
What is the most efficient way to detect the first and last elements? Happy to use a jQuery solution.
Thanks.
You can use the :first-child and :last-child selectors to find the form elements. Then, you can attach a keydown event handler and check for SHIFT+TAB and TAB respectively.
$('div input:first-child').keydown(function(event) {
if (event.which == 9 && event.shiftKey) { // Tab is keycode 9
// Do custom tab handling
}
});
$('div input:last-child').keydown(function(event) {
if (event.which == 9) {
// Do custom tab handling
}
});
As long as the inputs truly the first and last children of the DIVs, the below will work. Otherwise you will need to get a little more tricky with the selection.
Edit: My assertion about child order seems to be incorrect. This should work for most situations. End Edit
If you want it to be specific to certain kinds of input, or anything which is considered input but isn't actually an input element, the selector will need some minor adjustment.
Demo
http://jsfiddle.net/JAAulde/tHkdz/
Code
$('#myform')
.find('div input:first-child, div input:last-child')
.bind('keydown', function(e) {
if (e.which === 9) {
// custom code here
e.preventDefault();
}
});
You could use the first and last child selectors:
var first = $("#form-name:first-child");
var last = $("#form-name:last-child");
Sounds like you want to have the tab wrap on the first and last element.
Get the first: $('#form').find('input, textarea, select').first();
Get the last: $('#form').find('input, textarea, select').first();
Bind keydown to the elements: .keydown()
use this to determine which key was pressed: jQuery Event Keypress: Which key was pressed?
Then focus on the element you want: .focus()
edit: selector logic was wrong
e.g.: http://jsfiddle.net/rkw79/fuXyf/

Document input track change

I need help on this one:
In the document there are several input fields with <div class="quantity"><input .. >
This is automatically generated by the system and I have no access to alter this.
So I need a way with jQuery to track the onchange function when the input changes.
What is a good way to achieve this?
var updateInput = document.getElementById(".quantity input");
if ( updateInput ????? ) {
alert("Hallo")
};
getElementById does not work on class names. You asked for jquery, why not use change()?
$('.quantity input').change(function() {
alert('Input changed');
});
From the manual:
The change event is sent to an element
when its value changes. This event is
limited to <input> elements,
<textarea> boxes and <select>
elements. For select boxes,
checkboxes, and radio buttons, the
event is fired immediately when the
user makes a selection with the mouse,
but for the other element types the
event is deferred until the element
loses focus.
Demo: http://jsfiddle.net/Madmartigan/yzGYU/

How to handle enter key in Javascript overlay?

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.

Categories

Resources