Develop Reference

Avoid closing Bootstrap Modal when specific button inside is clicked

I implemented a modal with a form inside with 5 buttons: Submit, 2 Close buttons, and 2 more for an input number spinner that allows the user to select a quantity using "+" and "-" buttons. The problem is that every time the "+" or "-" button are clicked, the modal is closed, which is a normal behavior for modals when pressing submit or close buttons but I need the modal to stay visible and allow the user to select the quantity without the modal been closed.
This are the buttons inside the form that control the number spinner:
<div class="item-count">
<div class="input-group number-spinner">
<span class="input-group-btn">
<button class="btn btn-default" id="spin1" data-dir="dwn">-</button>
</span>
<input type="text" class="form-control text-center" name="quantity" value="1">
<span class="input-group-btn">
<button class="btn btn-default" id="spin2" data-dir="up">+</button>
</span>
</div>
</div>
And this is the function that control the input spinner:
<script>
$(document).on('click', '.number-spinner button', function () {
var btn = $(this),
oldValue = btn.closest('.number-spinner').find('input').val().trim(),
newVal = 0;
if (btn.attr('data-dir') == 'up') {
newVal = parseInt(oldValue) + 1;
} else {
if (oldValue > 1) {
newVal = parseInt(oldValue) - 1;
} else {
newVal = 1;
}
}
btn.closest('.number-spinner').find('input').val(newVal);
});
</script>
if I use the e.preventDefault() (associated to ID's for the buttons for this purpose: spin1 and spin2) to avoid the modal to be closed, the modal stays visible but the spinner doesn't not update the quantity input with the new value, and he form sends the default value of 1 to the server to be processed. Any guidance is appreciated. Thanks.

When you tried e.preventDefault(), did you pass the event to the function?
If not check the console, there must be an error saying that 'e' is undefined.
So just pass 'e'(the event), then it should work.
$(document).on('click', '.number-spinner button', function (e) {
e.preventDefault();
var btn = $(this),
oldValue = btn.closest('.number-spinner').find('input').val().trim(),
newVal = 0;
if (btn.attr('data-dir') == 'up') {
newVal = parseInt(oldValue) + 1;
} else {
if (oldValue > 1) {
newVal = parseInt(oldValue) - 1;
} else {
newVal = 1;
}
}
btn.closest('.number-spinner').find('input').val(newVal);
});

I think the best solution will be adding <a href> tag with the button style.

AngularJS focusing elements

I have the following situation:
<input type="text" ng-model="search" />
<div ng-hide="!search.length || selected ">
<ul>
<li ng-repeat="poster in tasks| poster: search track by $index" ng-click="handleSelection(poster)" style="cursor:pointer" ng-class="{active:isCurrent($index)}" ng-mouseenter="setCurrent($index)">
{{poster}}
</li>
</ul>
</div>
This all works fine and the list with the "suggested" items comes out as it should, however I would like when the user reaches certain point and presses arrow down to be able to jump to the suggested list then press enter which will populate the search box and close the suggest list.
I have tried to create a directive that binds to keydown and listen to key code, lets say 40 ( arrow down ), however even when I add tabindex to the LI elements i am not able to set focus on them. Even further I am assuming i need to know the length of the LI's so when the user reaches the last element it just stops. Same logic for going up.
thanks in advance!
EDIT: I got it, I was failing to see this entire time that there is no spoon. How about this?
<input type="text" ng-model="search" ng-keydown="selected=false" ng-keypress="keyChanged($event);" />
<div ng-hide="!search.length || selected ">
<ul>
<li ng-repeat="poster in (filteredResults = (tasks | poster: search)) track by $index" ng-click="handleSelection(poster)" style="cursor:pointer" ng-class=" {active:isCurrent($index+1)}" ng-mouseenter="setCurrent($index+1)">
{{poster}}
</li>
</ul>
</div>
set global
current = 1;
and in the controller like this :
$scope.handleSelection = function( item ) {
$scope.search = item;
$scope.selected = true;
}
$scope.isCurrent = function( index ) {
if( index === current ) {
return true;
}
else {
return false;
}
}
$scope.setCurrent = function( index ) {
current = index;
}
$scope.keyChanged = function( ev ) {
//going down
if( ev.keyCode == 40 && (current+1) <= $scope.filteredResults.length ) {
$scope.setCurrent( current + 1 );
}
//going up
if( ev.keyCode == 38 && (current-1) >= 1 ) {
$scope.setCurrent( current - 1 );
}
//press enter
if( ev.keyCode == 13 ) {
$scope.handleSelection( $scope.filteredResults[current-1]);
}
}
Works both with keyboard and a mouse and will stop and the first/last element.
I have omitted the filters because they are irrelevant to the current situation.

Solution 1:
Use typeahead: http://angular-ui.github.io/bootstrap/
Solution 2, if you really need it custom:
I'd like to know if there are shortcuts but meanwhile this is how my code looks like, those are code snippets and should take them as pseudo-code and adapt it for your own project:
In a service:
searchBoxData.onKeyUpAndDown = function(direction){
searchBoxData.selected_index += direction;
if(searchBoxData.selected_index < 0){
searchBoxData.selected_index = searchBoxData.displayedLength() - 1;
}else if(searchBoxData.selected_index > searchBoxData.displayedLength() - 1){
searchBoxData.selected_index = 0;
}
searchBoxData.selectContent();
};
In a directive
app.directive('fancyinput', [ "$rootScope", "SearchBoxData", function($rootScope, SearchBoxData) {
return {
restrict: "A",
link: function link(scope, element) {
scope.unbind_up_and_down = false;
scope.searchBoxData = SearchBoxData;
element.bind("keydown", function(e){
if(e.keyCode === 13){
scope.searchBoxData.submitQuery(e);
}else{
if ((e.keyCode === 38 || e.keyCode === 40) && scope.unbind_up_and_down === false) {
var direction = +1;
if (e.keyCode === 38){ direction = -1; }
$scope.searchBoxData.onKeyUpAndDown(direction);
}else{
// reset selection if typing
scope.$apply(function () { scope.searchBoxData.selected_index = 10000; });
scope.processBinding(e, this);
}
}
});
}
};
}]);
Let me know if you need anything else. I ll update my answer accordingly.

tabindex issue with select2

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");

JavaScript for handling Tab Key press

As we know, when we click on TAB key on keyboard, it allows us to navigate through all active href links present open webpage. Is it possible to read those urls by means of JavaScript?
example:
function checkTabPress(key_val) {
if (event.keyCode == 9) {
// Here read the active selected link.
}
}

You should be able to do this with the keyup event. To be specific, event.target should point at the selected element and event.target.href will give you the href-value of that element. See mdn for more information.
The following code is jQuery, but apart from the boilerplate code, the rest is the same in pure javascript. This is a keyup handler that is bound to every link tag.
$('a').on( 'keyup', function( e ) {
if( e.which == 9 ) {
console.log( e.target.href );
}
} );
jsFiddle: http://jsfiddle.net/4PqUF/

Having following html:
<!-- note that not all browsers focus on links when Tab is pressed -->
Link
<input type="text" placeholder="Some input" />
Another Link
<textarea>...</textarea>
You can get to active link with:
// event listener for keyup
function checkTabPress(e) {
"use strict";
// pick passed event or global event object if passed one is empty
e = e || event;
var activeElement;
if (e.keyCode == 9) {
// Here read the active selected link.
activeElement = document.activeElement;
// If HTML element is an anchor <a>
if (activeElement.tagName.toLowerCase() == 'a')
// get it's hyperlink
alert(activeElement.href);
}
}
var body = document.querySelector('body');
body.addEventListener('keyup', checkTabPress);
Here is working example.

Only one suggestion instead of 9 you can use KeyCodes.TAB.

Given this piece of HTML code:
<a href='https://facebook.com/'>Facebook</a>
<a href='https://google.ca/'>Google</a>
<input type='text' placeholder='an input box'>
We can use this JavaScript:
function checkTabPress(e) {
'use strict';
var ele = document.activeElement;
if (e.keyCode === 9 && ele.nodeName.toLowerCase() === 'a') {
console.log(ele.href);
}
}
document.addEventListener('keyup', function (e) {
checkTabPress(e);
}, false);
I have bound an event listener to the document element for the keyUp event, which triggers a function to check if the Tab key was pressed (or technically, released).
The function checks the currently focused element and whether the NodeName is a. If so, it enters the if block and, in my case, writes the value of the href property to the JavaScript console.
Here's a jsFiddle

try this
<body>
<div class="linkCollection">
<a tabindex=1 href="www.demo1.com">link</a>
<a tabindex=2 href="www.demo2.com">link</a>
<a tabindex=3 href="www.demo3.com">link</a>
<a tabindex=4 href="www.demo4.com">link</a>
<a tabindex=5 href="www.demo5.com">link</a>
<a tabindex=6 href="www.demo6.com">link</a>
<a tabindex=7 href="www.demo7.com">link</a>
<a tabindex=8 href="www.demo8.com">link</a>
<a tabindex=9 href="www.demo9.com">link</a>
<a tabindex=10 href="www.demo10.com">link</a>
</div>
</body>
<script>
$(document).ready(function(){
$(".linkCollection a").focus(function(){
var href=$(this).attr('href');
console.log(href);
// href variable holds the active selected link.
});
});
</script>
don't forgot to add jQuery library
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

Use TAB & TAB+SHIFT in a Specified container or element
Source
we will handle TAB & TAB+SHIFT key listeners first
$(document).ready(function() {
lastIndex = 0;
$(document).keydown(function(e) {
if (e.keyCode == 9) var thisTab = $(":focus").attr("tabindex");
if (e.keyCode == 9) {
if (e.shiftKey) {
//Focus previous input
if (thisTab == startIndex) {
$("." + tabLimitInID).find('[tabindex=' + lastIndex + ']').focus();
return false;
}
} else {
if (thisTab == lastIndex) {
$("." + tabLimitInID).find('[tabindex=' + startIndex + ']').focus();
return false;
}
}
}
});
var setTabindexLimit = function(x, fancyID) {
console.log(x);
startIndex = 1;
lastIndex = x;
tabLimitInID = fancyID;
$("." + tabLimitInID).find('[tabindex=' + startIndex + ']').focus();
}
/*Taking last tabindex=10 */
setTabindexLimit(10, "limitTablJolly");
});
In HTML define tabindex
<div class="limitTablJolly">
<a tabindex=1>link</a>
<a tabindex=2>link</a>
<a tabindex=3>link</a>
<a tabindex=4>link</a>
<a tabindex=5>link</a>
<a tabindex=6>link</a>
<a tabindex=7>link</a>
<a tabindex=8>link</a>
<a tabindex=9>link</a>
<a tabindex=10>link</a>
</div>

You should be able to do this with the keydown event. To be specific, event.target should point at the selected element and event.target.href will give you the href-value of that element. See mdn for more information.
The following code is jQuery, but apart from the boilerplate code, the rest is the same in pure javascript. This is a keydown handler that is bound to every link tag.
$('a').on( 'keydown ', function( e ) {
if( e.which == 9 ) {
console.log( e.target.href );
}});

event.keyCode has been deprecated.
Use event.key instead.
Here are the values you can use to assert against event.key:
https://www.w3.org/TR/uievents-key/#named-key-attribute-values
Use this JavaScript solution:
function keyPress(event) {
if (event.key === "Tab") {
// ...
}
}

You need to use Regular Expression
For Website URL it is
var urlPattern =
/(http|ftp|https)://[\w-]+(.[\w-]+)+([\w.,#?^=%&:/~+#-]*[\w#?^=%&/~+#-])?/
Use this Expression as in example
var regex = new RegExp(urlPattern ); var t = 'www.google.com';
var res = t.match(regex /g);
For You have to pass your web page as string to this javascript in variable t and get array

Cycle Focus to First Form Element from Last Element & Vice Versa

I have created a form with malsup's Form Plugin wherein it submits on change of the inputs. I have set up my jQuery script to index drop down menus and visible inputs, and uses that index to determine whether keydown of tab should move focus to the next element or the first element, and likewise with shift+tab keydown. However, instead of moving focus to the first element from the last element on tab keydown like I would like it to, it moves focus to the second element. How can I change it to cycle focus to the actual first and last elements? Here is a live link to my form: http://www.presspound.org/calculator/ajax/sample.php. Thanks to anyone that tries to help. Here is my script:
$(document).ready(function() {
var options = {
target: '#c_main',
success: setFocus
};
$('#calculator').live('submit', function() {
$(this).ajaxSubmit(options);
return false;
});
$(this).focusin(function(event) {
var shiftDown = false;
$('input, select').each(function (i) {
$(this).data('initial', $(this).val());
});
$('input, select').keyup(function(event) {
if (event.keyCode==16) {
shiftDown = false;
$('#shiftCatch').val(shiftDown);
}
});
$('input, select').keydown(function(event) {
if (event.keyCode==16) {
shiftDown = true;
$('#shiftCatch').val(shiftDown);
}
if (event.keyCode==13) {
$('#captured').val(event.target.id);
} else if (event.keyCode==9 && shiftDown==false) {
return $(event.target).each(function() {
var fields = $(this).parents('form:eq(0),calculator').find('select, input:visible');
var index = fields.index(this);
var nextEl = fields.eq(index+1).attr('id');
var firstEl = fields.eq(0).attr('id');
var focusEl = '#'+firstEl;
if (index>-1 && (index+1)<fields.length) {
$('#captured').val(nextEl);
} else if(index+1>=fields.length) {
if ($(this).val() != $(this).data('initial')) {
$('#captured').val(firstEl);
} else {
event.preventDefault();
$(focusEl).focus();
}
}
return false;
});
} else if (event.keyCode==9 && shiftDown==true) {
return $(event.target).each(function() {
var fields = $(this).parents('form:eq(0),calculator').find('select, input:visible');
var index = fields.index(this);
var prevEl = fields.eq(index-1).attr('id');
var lastEl = fields.eq(fields.length-1).attr('id');
var focusEl = '#'+lastEl;
if (index<fields.length && (index-1)>-1) {
$('#captured').val(prevEl);
} else if (index==0) {
if ($(this).val() != $(this).data('initial')) {
$('#captured').val(lastEl);
} else {
event.preventDefault();
$(focusEl).select();
}
}
return false;
});
}
});
});
});
function setFocus() {
with (document.calculator)
var recap = document.getElementById(recaptured.value);
if (recap!=null) {
setTimeout(function() {
if (recap.getAttribute('type')=='text') {
recap.select();
} else {
recap.focus();
}
}, 100 );
}
}
Edit #1: I made a few minor changes to the code, which has brought me a little closer to my intended functionality of the script. However, I only made one change to the code pertaining to the focus: I tried to to disable the tab keydown when pressed on the last element (and also the shift+tab keydown on the first element) in an attempt to force the focus on the element I want without skipping over it like it has been doing. This is the code I added:
$(this).one('keydown', function (event) {
return !(event.keyCode==9 && shiftDown==true);
});
This kind of works. After the page loads, If the user presses tab on the last element without making a change to its value, the focus will be set to the second element. However, the second time the user presses tab on the last element without making a change to its value, and every subsequent time thereafter, the focus will be set to the first element, just as I would like it to.
Edit #2: I replaced the code in Edit #1, with code utilizing event.preventDefault(), which works better. While if a user does a shift+tab keydown when in the first element, the focus moves to the last element as it should. However, if the user continues to hold down the shift key and presses tab again, focus will be set back to the first element. And if the user continues to hold the shift key down still yet and hits tab, the focus will move back to the last element. The focus will shift back and forth between the first and last element until the user lifts the shift key. This problem does not occur when only pressing tab. Here is the new code snippet:
event.preventDefault();
$(focusEl).focus();

You have a lot of code I didn't get full overview over, so I don't know if I missed some functionality you wanted integrated, but for the tabbing/shift-tabbing through form elements, this should do the work:
var elements = $("#container :input:visible");
var n = elements.length;
elements
.keydown(function(event){
if (event.keyCode == 9) { //if tab
var currentIndex = elements.index(this);
var newIndex = event.shiftKey ? (currentIndex - 1) % n : (currentIndex + 1) % n;
var el = elements.eq(newIndex);
if (el.attr("type") == "text")
elements.eq(newIndex).select();
else
elements.eq(newIndex).focus();
event.preventDefault();
}
});
elements will be the jQuery object containing all the input fields, in my example it's all the input fields inside the div #container
Here's a demo: http://jsfiddle.net/rA3L9/

Here is the solution, which I couldn't have reached it without Simen's help. Thanks again, Simen.
$(document).ready(function() {
var options = {
target: '#c_main',
success: setFocus
};
$('#calculator').live('submit', function() {
$(this).ajaxSubmit(options);
return false;
});
$(this).focusin(function(event) {
$('#calculator :input:visible').each(function (i) {
$(this).data('initial', $(this).val());
});
return $(event.target).each(function() {
$('#c_main :input:visible').live(($.browser.opera ? 'keypress' : 'keydown'), function(event){
var elements = $("#calculator :input:visible");
var n = elements.length;
var currentIndex = elements.index(this);
if (event.keyCode == 13) { //if enter
var focusElement = elements.eq(currentIndex).attr('id');
$('#captured').val(focusElement);
} else if (event.keyCode == 9) { //if tab
var newIndex = event.shiftKey ? (currentIndex - 1) % n : (currentIndex + 1) % n;
var el = elements.eq(newIndex);
var focusElement = el.attr('id');
if ($(this).val() != $(this).data('initial')) {
$('#captured').val(focusElement);
} else if ((currentIndex==0 && event.shiftKey) || (currentIndex==n-1 && !event.shiftKey)) {
event.preventDefault();
if (el.attr('type')=='text') {
$.browser.msie ? "" : $(window).scrollTop(5000);
el.select().delay(800);
} else {
$.browser.msie ? "" : $(window).scrollTop(-5000);
el.focus().delay(800);
}
} else if (el.is('select')) {
event.preventDefault();
if (el.attr('type')=='text') {
el.select();
} else {
el.focus();
}
}
}
});
});
});
});
function setFocus() {
with (document.calculator)
var recap = document.getElementById(recaptured.value);
if (recap!=null) {
setTimeout(function() {
if (recap.getAttribute('type')=='text') {
recap.select();
} else {
recap.focus();
}
}, 1 );
}
}
I put my files available to download in my live link: http://www.presspound.org/calculator/ajax/sample.php