I have a div (button) that when is pressed it deletes the characters of an specific text field. Now I am trying to change the code in a way that delete the characters of the last focused text field.
This is the code that only delete the characters of one text field:
$(".delete").on("mousedown",function(evt) {
var nameInput = document.querySelector("#name")
var cursorPosition = nameInput.selectionStart;
$("#firstName").val(
function(index, value){
return value.substr(0,cursorPosition - 1) + value.substr(cursorPosition);
});
nameInput.selectionStart = cursorPosition - 1;
nameInput.selectionEnd = cursorPosition - 1;
return false;
});
And this is what I haver for now:
$(".delete").on("mousedown",function(evt) {
var lastFocused;
$(".item").focusout( function(e) {
lastFocused = e.target;
});
var cursorPosition = lastFocused.selectionStart;
lastFocused.val(
function(index, value){
return value.substr(0,cursorPosition - 1) + value.substr(cursorPosition);
});
lastFocused.selectionStart = cursorPosition - 1;
lastFocused.selectionEnd = cursorPosition - 1;
return false;
});
The HTML:
<div class="delete key-btn">
<input id="firstName" name="firstName" type="text" class="item" required/>
<input id="firstName" name="firstName" type="text" class="item" required/>
In console, I'm getting the error: "Cannot read property 'selectionStart' of undefined". Can someone please tell me how to achive this? Thanks
This works:
// 1. this has to be declared globally
var lastFocused;
// 2. you need to set the event handler for the 'item' elements outside of the delete handler
// I'd also suggest using the 'focus' event here instead of 'focusout'
$(".item").focus(function(e) {
lastFocused = e.target;
});
$(".delete").on("mousedown", function(evt) {
// 3. need the null check if none of the inputs have been focused yet
if (!lastFocused) {
return;
}
var cursorPosition = lastFocused.selectionStart;
// 4. need to wrap this in the jQuery function to use val()
$(lastFocused).val(
function(index, value){
return value.substr(0,cursorPosition - 1) + value.substr(cursorPosition);
});
lastFocused.selectionStart = cursorPosition - 1;
lastFocused.selectionEnd = cursorPosition - 1;
return false;
});
You can return the target to the variable of lastFocused and your delete function should work.
I'm not sure what the rest of your code looks like, but this is my best guess as to what you're looking for. This will get rid of the error and you can log lastFocused.
lastFocused = $(".item").focusout( function(e) {
return e.target;
});
I explain better with code.
var focusedItems = [];
$('.item').on('focusin', function() { focusedItems.push( $(this) ); }
$('.item').on('focusin', function() { focusedItems.splice( $(this), 1 ); }
$('.delete').on('mousedown', function(evt) {
var lastFocused = focusedItems[ focusedItems.length - 1 ];
// do whatever you want
}
As you focus on a item you push in the array as a jquery reference, as you focusout you remove it. The last element is the last focused.
Related
I'm looking to a way to apply this solution to all of the fields which have <input type="number">.
So far I've only seen the way to find element by ID using jQuery and then attach an input filter.
However, what I'm trying to achieve is to add such filter to all elements with the "numeric" type.
Example:
<html>
<body>
<div>
<input type="number">
</div>
</body>
</html>
JS Function:
// Restricts input for the set of matched elements to the given inputFilter function.
(function($) {
$.fn.inputFilter = function(inputFilter) {
return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {
if (inputFilter(this.value)) {
this.oldValue = this.value;
this.oldSelectionStart = this.selectionStart;
this.oldSelectionEnd = this.selectionEnd;
} else if (this.hasOwnProperty("oldValue")) {
this.value = this.oldValue;
this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
} else {
this.value = "";
}
});
};
}(jQuery));
Application of the modifier to a particular element
$(document).ready(function() {
$("#myTextBox").inputFilter(function(value) { // I need to find ALL elements with input type = number here instead of just myTextBox
return /^\d*$/.test(value); // Allow digits only, using a RegExp
});
});
Update:
I tried the following:
(function($) {
$.fn.inputFilter = function(inputFilter) {
return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {
if (inputFilter(this.value)) {
this.oldValue = this.value;
this.oldSelectionStart = this.selectionStart;
this.oldSelectionEnd = this.selectionEnd;
} else if (this.hasOwnProperty("oldValue")) {
this.value = this.oldValue;
this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
} else {
this.value = "";
}
});
};
}(jQuery));
if($('input[type="number"]').length > 0){
$('input[type="number"]').each(function(index, element){ console.log(element); // Successfully logs the element!
element.inputFilter(function(value) { // I need to find ALL elements with input type = number here instead of just myTextBox
return /^\d*$/.test(value); // Allow digits only, using a RegExp
});
})
}
Getting the error:
Use an attribute selector:
$('input[type="number"]')...
Process the result als usual but beware that inputFilter is registered as a jQuery extension and is not defined on DOM elements:
// Iterate over the matched elements. 'element' values are DOM elements and thus oblivious to jquery. For this reason you cannot call `inputFilter` on them.
$('input[type="number"]').each( function(index, element){
console.log(element); // Successfully logs the element!
}
// Untested code (jQuery should handle the overhead of iterating over the elements.)
$('input[type="number"]').inputFilter(
function(value) { // I need to find ALL elements with input type = number here instead of just myTextBox
return /^\d*$/.test(value); // Allow digits only, using a RegExp
}
);
if($('input[type="number"]').length > 0){
//do something like as $('input[type="number"]').each(function(index, element){ console.log(element); })
}
EDIT: here is a much simpler JSFiddle version of the code that illustrates the problem more succinctly:
https://jsfiddle.net/Lfo463d9/2/
I have a bunch of form elements that when updated change the options of the element next in the list. I have that working fine. However, now I am trying to get it so that if the root element is changed then it checks the next element to see if it is part of the new list and if not then makes it blank and then triggers the change event of the next one (so that it will in turn make the next element blank and so on). The change event doesn't seem to be firing.
I am not getting any errors in the console.
Is this because I am trying to fire a change event from within a change event? Is there some sort of blocking going?
(or am I just doing something stupid - I only started javascript a week or so ago)
I've tried calling the change() function on the element in javascript too.
function addChainOptions(anelementID, nextelementID, listToChangeID, firstToSecond, secondFromFirst)
{ var anelement = document.getElementById(anelementID);
anelement.addEventListener("change", function() {
var nextelement = document.getElementById(nextelementID);
var listToChange = document.getElementById(listToChangeID);
console.log(this.id + "has changed");
if(this.value.length == 0)
{
nextelement.value = "";
$("#" + nextelementID).change();
}
nextelement.disabled = true;
google.script.run.withSuccessHandler(function(value) {
htmlOptions = value.map(function(r){return '<option value = "' + r[0] + '">';}).join(" ")
listToChange.innerHTML = htmlOptions;
if(value.length == 1) {
nextelement.value = value[0];
nextelement.change();
}
if(value.includes(nextelement.value) == false && nextelement.value.length > 0)
{
nextelement.value = "";
console.log(nextelement.id + "set to blank - triggering change")
$("#" + nextelementID).change();
}
nextelement.removeAttribute("disabled");
}).subListLookUp(firstToSecond, secondFromFirst, this.value);
});
};
addChainOptions("productTypesInput01", "productsInput01", "productsList01", "ProductTypeMulti", "Products");
addChainOptions("brandsInput01", "productTypesInput01", "productTypesList01", "BrandToProductType", "ProductTypeFromBrand");
addChainOptions("category", "brandsInput01", "brandsList01", "CategoryToBrand", "BrandFromCategory");
At the moment it is setting the next one to blank and trying to trigger the change but nothing happens.
You should try listening to "input" event instead of "change".
const firstinput = document.getElementById("input1");
const secondinput = document.getElementById("input2");
const thirdinput = document.getElementById("input3");
function dispatchEvent(target, eventType) {
var event = new Event( eventType, {
bubbles: true,
cancelable: true,
});
target.dispatchEvent(event);
}
firstinput.addEventListener("input", function() {
secondinput.value = 2;
dispatchEvent(secondinput,"input");
});
secondinput.addEventListener("input", function() {
thirdinput.value = 3;
//dispatchEvent(thirdinput,"input");
});
<input id="input1">
<input id="input2">
<input id="input3">
How do I make make an Enter keypress in an <input> element shift focus to the next <input> element on the page?
I have a for loop that creates <li> elements with <input> elements inside. I need to make so that when the user hits enter on their keyboard, the website will focus on the next input field so that the user can enter the next player name without having to toggle between using their mouse and their keyboard.
I thought using the nextSibling property was the solution but it wont work because the <input> elements technically dont have any siblings because each of them is inside/are children of diferent <li> elements.
Here is my JavaScript:
for ( var i = 1 ; i <= numberOfPlayers ; i++ ){
var inputElement = document.createElement('input');
var liElement = document.createElement('li');
inputElement.setAttribute( 'type' , 'text' );
inputElement.setAttribute ( 'id' , 'name-input-' + i );
inputElement.setAttribute ( 'class' , 'name-input');
inputElement.setAttribute ( 'placeholder' , 'Enter a name for player ' + i );
liElement.appendChild(inputElement);
nameInputArray[i] = inputElement;
document.getElementById('name-list').appendChild(liElement);
inputElement.addEventListener( 'keypress' , function(event){
if ( event.which === 13 ) {
alert(this);
document.getElementById( 'name-input-' + (i+1)).focus();
}
} );
}
I tried using the "i" in the for loop and string concatenation to select the ID of the next element but the "i" variable isn't working either because by the time that code runs that "i" is equal to the highest number that it can be after the whole for loop has ran.
Problem:
The problem with your actual code is that i is always equal to numberOfPlayers+1 in the event handler callback function, so you were trying to focus on a null element, you can read more about JavaScript closures to see why i was always equal to numberOfPlayers+1.
Solution:
First you need to use the onkeypress event on your input, then test if the pressed key is the Enter, if it's pressed get the id of the current input, extract i value from it and focus on the next input element using the next id.
This is how should be your code:
inputElement.addEventListener('keypress', function(event) {
if (event.which === 13) {
var i = parseInt(this.id.charAt(this.id.length-1));
console.log(i);
if(i<=numberOfPlayers){
document.getElementById('name-input-' + (i + 1)).focus();
}
}
});
This is a working snippet:
var numberOfPlayers = 5;
var nameInputArray = [];
for (var i = 1; i <= numberOfPlayers; i++) {
var inputElement = document.createElement('input');
var liElement = document.createElement('li');
inputElement.setAttribute('type', 'text');
inputElement.setAttribute('id', 'name-input-' + i);
inputElement.setAttribute('class', 'name-input');
inputElement.setAttribute('placeholder', 'Enter a name for player ' + i);
liElement.appendChild(inputElement);
nameInputArray[i] = inputElement;
document.getElementById('name-list').appendChild(liElement);
inputElement.addEventListener('keypress', function(event) {
if (event.which === 13) {
var i = parseInt(this.id.charAt(this.id.length - 1));
console.log(i);
if(i<numberOfPlayers){
document.getElementById('name-input-' + (i + 1)).focus();
}
}
});
}
<ul id="name-list"></ul>
If you want to stick with vanilla JS, use this:
for (var i = 1; i <= numberOfPlayers; i++) {
var inputElement = document.createElement("input");
var liElement = document.createElement("li");
inputElement.type = "text";
inputElement.id = "name-input-" + i;
inputElement.className = "name-input";
inputElement.placeholder = "Enter a name for player " + i;
liElement.appendChild(inputElement);
nameInputArray[i] = inputElement;
document.getElementById("name-list").appendChild(liElement);
(function(i) {
inputElement.addEventListener("keypress", function(event) {
if (event.which === 13) {
alert(this);
document.getElementById("name-input-" + (i + 1)).focus();
}
});
})(i);
}
This is my solution.
Do not forget that the created <li> element needs to be appended to something like <body>. I have actually added a <ul> element and appended it to the <body> and then appended the <li> elements to the <ul> element.
If you use nextSibling, you do not need to keep elements in nameInputArray. I have not removed it to show how it should be initialized before you can use it in your loop. Also, nextSibling works in my solution since I have put all the <li>s under one <ul> which I think is the correct thing to do anyway.
Other than that, I just corrected a few things here and there. Let me know if you have more questions about this code.
function eventFunc(event) {
if (event.which === 13) {
var nextInput = event.target.parentElement.nextSibling.childNodes[0];
if (nextInput !== null)
nextInput.focus();
}
}
var numberOfPlayers = 4;
var nameInputArray = [];
var ulElement = document.createElement('ul');
document.body.append(ulElement);
for (var i = 0; i < numberOfPlayers; i++) {
var liElement = document.createElement('li');
ulElement.append(liElement);
var inputElement = document.createElement('input');
inputElement.setAttribute('type', 'text');
inputElement.setAttribute('id', 'name-input-' + i);
inputElement.setAttribute('class', 'name-input');
inputElement.setAttribute('placeholder', 'Enter a name for player ' + i);
inputElement.setAttribute('onkeypress', "eventFunc(event)");
liElement.appendChild(inputElement);
nameInputArray[i] = inputElement;
}
UPDATE: Getting each input box from parent <li> elements:
After comment from the OP, I see that they want a structure like this:
<ul>
<li>input box1</li>
<li>input box2</li>
<li>input box3</li>
</ul>
In this structure, each input box is the first child node of its parent <li> element. Therefore, we can still use nextSibling (as the OP intended to use) in this way:
nextInput = event.target.parentElement.nextSibling.childNodes[0];
This line first finds the parent <li> element, applies nextSibling to get the next li element and then gets the input box inside that element.
$('input').on('keyup', function(event){
if(event.keyCode == 13){ // 13 is the keycode for enter button
$(this).next('input').focus();
}
});
https://jsfiddle.net/jat1merL/
are you looking for this?
by the way, use keyup instead of keypress. if a key is hold it fires mass of keypress events in a speed you can't handle ;)
I am having an issue with the taborder on my form whilst using select2.
I have an input form that I want the user to be able to tab through in order.
I have been able to order the text input fields but not select2 dropdownlists.
It appears the issue is with them having a default tabindex="-1", as below;
> <div id="s2id_ctl00_MainContent_ddlAreaKept" class="select2-container
> form-control">
> <a class="select2-choice" tabindex="-1" onclick="return false;" href="javascript:void(0)">
> <input id="s2id_autogen4" class="select2-focusser select2-offscreen" type="text" tabindex="0">
> <div class="select2-drop select2-display-none select2-with-searchbox">
> </div>
> <select id="ctl00_MainContent_ddlAreaKept" class="form-control select2-offscreen" name="ctl00$MainContent$ddlAreaKept" tabindex="-1">
I have also written the following javascript to add tabIndex values to the fields but it isn't working how I'd like.
var tabOrder = 0;
document.getElementById("ctl00_MainContent_ddlAreaKept").tabIndex = tabOrder++;
document.getElementById("ctl00_MainContent_ddlNCDYears").tabIndex = tabOrder++;
document.getElementById("ctl00_MainContent_txtVehicleValue").tabIndex = tabOrder++;
document.getElementById("ctl00_MainContent_txtAge").tabIndex = tabOrder++;
document.getElementById("ctl00_MainContent_txtForename").tabIndex = tabOrder++;
document.getElementById("ctl00_MainContent_txtSurname").tabIndex = tabOrder++;
document.getElementById("ctl00_MainContent_txtEmail").tabIndex = tabOrder++;
document.getElementById("ctl00_MainContent_txtPhoneNumber").tabIndex = tabOrder++;
document.getElementById("ctl00_MainContent_btnGetQuote").tabIndex = tabOrder++;
The dropdownlists don't get tabbed into, it skips them and goes through the textboxes as it should.
Any help much appreciated!
SOLVED : I tried:
var tabOrder = 1;
and this has solved the issue. I don't exactly know why or how :|
There is a solution in github, you can create a js file and then you include it under the call of select2, inside this new file you must paste this:
jQuery(document).ready(function($) {
var docBody = $(document.body);
var shiftPressed = false;
var clickedOutside = false;
//var keyPressed = 0;
docBody.on('keydown', function(e) {
var keyCaptured = (e.keyCode ? e.keyCode : e.which);
//shiftPressed = keyCaptured == 16 ? true : false;
if (keyCaptured == 16) { shiftPressed = true; }
});
docBody.on('keyup', function(e) {
var keyCaptured = (e.keyCode ? e.keyCode : e.which);
//shiftPressed = keyCaptured == 16 ? true : false;
if (keyCaptured == 16) { shiftPressed = false; }
});
docBody.on('mousedown', function(e){
// remove other focused references
clickedOutside = false;
// record focus
if ($(e.target).is('[class*="select2"]')!=true) {
clickedOutside = true;
}
});
docBody.on('select2:opening', function(e) {
// this element has focus, remove other flags
clickedOutside = false;
// flag this Select2 as open
$(e.target).attr('data-s2open', 1);
});
docBody.on('select2:closing', function(e) {
// remove flag as Select2 is now closed
$(e.target).removeAttr('data-s2open');
});
docBody.on('select2:close', function(e) {
var elSelect = $(e.target);
elSelect.removeAttr('data-s2open');
var currentForm = elSelect.closest('form');
var othersOpen = currentForm.has('[data-s2open]').length;
if (othersOpen == 0 && clickedOutside==false) {
/* Find all inputs on the current form that would normally not be focus`able:
* - includes hidden <select> elements whose parents are visible (Select2)
* - EXCLUDES hidden <input>, hidden <button>, and hidden <textarea> elements
* - EXCLUDES disabled inputs
* - EXCLUDES read-only inputs
*/
var inputs = currentForm.find(':input:enabled:not([readonly], input:hidden, button:hidden, textarea:hidden)')
.not(function () { // do not include inputs with hidden parents
return $(this).parent().is(':hidden');
});
var elFocus = null;
$.each(inputs, function (index) {
var elInput = $(this);
if (elInput.attr('id') == elSelect.attr('id')) {
if ( shiftPressed) { // Shift+Tab
elFocus = inputs.eq(index - 1);
} else {
elFocus = inputs.eq(index + 1);
}
return false;
}
});
if (elFocus !== null) {
// automatically move focus to the next field on the form
var isSelect2 = elFocus.siblings('.select2').length > 0;
if (isSelect2) {
elFocus.select2('open');
} else {
elFocus.focus();
}
}
}
});
docBody.on('focus', '.select2', function(e) {
var elSelect = $(this).siblings('select');
if (elSelect.is('[disabled]')==false && elSelect.is('[data-s2open]')==false
&& $(this).has('.select2-selection--single').length>0) {
elSelect.attr('data-s2open', 1);
elSelect.select2('open');
}
});
});
This work for me, if you want to know more: https://github.com/peledies/select2-tab-fix
© 2017 GitHub, Inc.
Terms
Privacy
Security
Status
Help
Contact GitHub
API
Training
Shop
Blog
About
focus it after select it!
$('.select2').on('select2:select', function (e) {
$(this).focus();
});
for your code replace .select2-offscreen with my .select2.
S F My English!
You could bind load event and trigger it on first time loaded
As you can see , the tabindex of the select control will become "3" instead of "-1"
$(document).ready(function() {
var $select2 = $("#tab2");
$select2.data('placeholder', 'Please Chhose').select2({
formatNoMatches: function (term) {
return 'No Match "' + term + '" Item';
},
allowClear: true
}).on("load", function(e) {
$(this).prop('tabindex',3);
}).trigger('load');
$("#tab1").prop('tabindex',4);
$("#tab3").prop('tabindex',2);
$("#tab4").prop('tabindex',1);
}
JSBIN
This code worked for me. I focus the first element in the modal:
$('#modalId').on('shown.bs.modal', function () {
$('#FirstElement').focus()
});
TabIndex Issue might happen after the form reset.
As per the documentation You may clear all current selections in a Select2 control by setting the value of the control to null:
$(selector).val(null).trigger("change");
I am trying to implement tagging just like what facebook does with #friendname. I have a textarea and I wanted to detect when a user typed in #. How do I do so using a keyup listener? Is it possible to get the entered text using keyup? Here's what I have now
$("#recommendTextArea").keyup(function () {
var content = $(this).val(); //content Box Data
var go = content.match(start); //content Matching #
var name = content.match(word); //content Matching #friendname
console.log(content[content.length-1]);
//If # available
if(go.length > 0)
{
//if #abc avalable
if(name.length > 0)
{
//do something here
}
}
});
Most importantly what I need is the index of the'#' that the user just entered.
LINK
(function ($, undefined) {
$.fn.getCursorPosition = function() {
var el = $(this).get(0);
var pos = 0;
if('selectionStart' in el) {
pos = el.selectionStart;
} else if('selection' in document) {
el.focus();
var Sel = document.selection.createRange();
var SelLength = document.selection.createRange().text.length;
Sel.moveStart('character', -el.value.length);
pos = Sel.text.length - SelLength;
}
return pos;
}
})(jQuery);
$("#recommendTextArea").on('keypress', function(e){
var key = String.fromCharCode(e.which);
if(key === '*') {
var position = $(this).getCursorPosition();
alert(position); // It is the position
alert($(this).val()); // This is the value
}
});
I made some changes HERE.
To detect a #, you'd do something like :
$("#recommendTextArea").keyup(function (e) {
if (e.which===50) {
alert('you typed #');
}
});
and this.value get's you whatever is typed into the textarea, and you'll need a regex to get what's between # and the first following space, or something similar depending on how you intend to do this ?
To get a name, you can do something like this :
var _name = false;
$("#recommendTextArea").keyup(function (e) {
if (_name) {
$('#name').text('name : ' + this.value.substring( this.value.lastIndexOf('#') ) )
}
if (e.which === 50) {
_name = true;
}
if (e.which === 32) {
_name = false;
}
});
FIDDLE
This is just a quick demo, building something that always works and accounts for every possible outcome will be a lot more work than this.
EDIT:
Most importantly what I need is the index of the'#' that the user just
entered.
that would be this.value.lastIndexOf('#')
EDIT AGAIN:
To get the names typed in the textarea regardless of cursor position, number of names etc. you'll have to use a regex, here's a quick example that gets all and any names typed in, as long as they start with a #, and ends with a blank space :
$("#recommendTextArea").keyup(function (e) {
var names = this.value.match(/#(.*?)\s/g);
$('#name').html('names typed : <br/><br/>' + names.join('<br/>'));
});
FIDDLE