How to disable Escape Key for Twitter Bootstrap Dropdowns? - javascript

I do not want Bootstrap Dropdowns to close when the ESC-Key is being pressed.
I tried the following snippet without any success:
$(document).on('shown.bs.dropdown', function (e) {
$(document).on("keydown", $button, function (e) {
var code = e.keyCode || e.which;
if (code === 27) {
e.preventDefault();
}
});
});
I found a similar Question, which is about disabling the Key for Bootstraps Modals. The solution for that seems to be data-keyboard="false". Is there a similar solution for Dropdowns?
Edit:
See JSFiddle

I use following:
$('#dropdown_id').on('hide.bs.dropdown', function (e) {
if ($(this).hasClass('keepopen')) {
$(this).removeClass('keepopen')
e.preventDefault();
e.stopPropagation();
return false;
}
});
Add class 'keepopen' when you expect dropdown to close and want to prevent it. In my case it is typing in the input element inside the dropdown:
$('#input_id').on('keydown', function(e){
if (e.which == 27) {
$('#dropdown_id').addClass('keepopen');
}
});

Related

Enter keypress is not detected on keypress function

I am trying to detect enter key press inside tinmyce editor and it's working fine for all the keys but its not working for enter key.
setup : function (instance) {
instance.on("keypress", function(e) {
var Keycode = (e.keyCode ? e.keyCode : e.which);
alert(Keycode);
});
}
In above code its alerting all the keys except ENTER. i don't know whats the issue there.
keypress wasn't working for me , but keydown worked for me.
setup : function (instance) {
instance.on("keydown", function(e) {
var Keycode = (e.keyCode ? e.keyCode : e.which);
alert(Keycode);
});
}
I think this will work, i've tested it and it works in this fiddle with jquery 2.24
$(document).keypress(function(e) {
if (e.which == 13) {
console.log('You pressed enter!');
} else {
console.log('You pressed ' + e.which);
}
});
body {
height: 500px;
width:500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
</body>
EDIT: Sorry i only noticed after that this was also tagged as tinymce
I think you can do this by slightly adjusting your function
//tinyMCE.init({
setup : function(instance) {
instance.onKeyDown.add(function(instance, event) {
if (event.keyCode == 13) { //enter
event.preventDefault();
event.stopPropagation();
//do stuff here
//alert("Enter!");
}
else{ alert (event.keyCode);}
});
}
//});
EDIT 2:
In the current tiny mce docs, there is an example of a function [in setup].
maybe try
tinymce.init({
selector: 'textarea', // change this value according to your HTML
setup: function(instance) {
instance.on('keypress', function(e) {
if (event.keyCode == 13) { //enter
event.preventDefault();
event.stopPropagation();
//do stuff here
//alert("Enter!");
}
else{ alert (event.keyCode);}
});
}
});
note the tinymce is now all lowercase..
Try this :
$(function () {
$("#MYTEXTBOX").keyup(function (e) {
alert(e.keyCode);
});
});
onkeypress does not detect some special keys like ctrl, shift arrow keys etc. Use onkeypress or onekyup instead.

capturing enter key in select2

I'm using select2 to present an editable selectbox. When user writes a statement which does not appear in the list(select2, data), I show a button to add this statement to the list.
Forcing users to click the button seems to me a little bit frustration. Is it possible to capture enter key in select2? I want to make user able to add his/her new statements into the list just by pressing enter key.
$('select2-search-field > input.select2-input').on('keyup', function(e) {
if(e.keyCode === 13)
addToList($(this).val());
});
I'm using Select2 4.0.3 and this works form me:
$(document).on('keyup', '.select2-search__field', function (e) {
if (e.which === 13) {
alert('Pressed enter!');
}
});
I am using Select2 4.0. This works for me;
$('.select2-search__field').on('keyup', function (e) {
if (e.keyCode === 13)
{
alert('Enter key');
}
});
None of these worked in Select2 4.0.6-rc1, but this did:
$('#mySelect2').on('select2:select', function (e) {
var data = e.params.data;
console.log(data);
});
It's detailed in the manual here.
This code can help you with class-based selections:
$('.select2-selection').on('keyup', function(e) {
var YOUR_SELECT2_CUSTOM_CLASS = $(this).attr('aria-labelledby').includes('YOUR_SELECT2_CUSTOM_CLASS')
if (YOUR_SELECT2_CUSTOM_CLASS && e.keyCode === 13) {
alert($(".YOUR_SELECT2_CUSTOM_CLASS").val())
}
});
Or you can use this:
$("YOUR_CUSTOM_CLASS").bind("change keypress", function() {
if (window.event.keyCode === 13) {
alert("Enter Captured")
}
})
If legacy select2 is used (some 3.5.4), then this option can be used:
$('#mySelect2').on('select2-selected', function (e) {
console.log(e.params);
// keypress enter script
});
It helped me a lot.
If you have two select2s on the page, then this is a great option!

Alert when backspace is pressed inside textbox

I have a grid with three read-only columns. Whenever user goes in there and try to edit by pressing backspace, I need to alert by giving a message. I am using this script and it doesn't work? Can anyone correct me?
$(document).ready(function () {
$('#txtCode').bind('keypress', function (e) {
if (e.which == 8) {
alert('The column is read-only and is not editable');
}
}
});
instead of keypress try with keyup or keydown with .on() method:
$('#txtCode').on('keyup keydown', function (e) {
You can bind multiple events like this too.
and one more thing closing of $('#txtCode') seems to be missing });
$(document).ready(function () {
$('#txtCode').on('keyup keydown', function (e) {
if (e.which == 8) {
alert('The column is read-only and is not editable');
}
}); //<----");" this is the closing you misssed this
});
See the fiddle in action
If this is all the code you are testing, you weren't closing the function properly, annotated in my posted code. Also use keyup instead of keypress
$(document).ready(function () {
$('#txtCode').bind('keyup', function (e) {
if (e.which == 8) {
alert('The column is read-only and is not editable');
}
}); /*<-- You weren't closing your function properly*/
});
Fiddle
You do indeed need to add a return false statement to ensure the character doesn't get deleted anyway. I also took it a step further and extended jQuery with a preventKeyUsage method.
$(document).ready(function () {
$.fn.preventKeyUsage = function (key, message) {
return this.each(function () {
$(this).on('keydown', function (e) {
return (e.keyCode === key) ? (function () {
alert(message);
return false;
})() : true;
});
});
};
$('#txtCode').preventKeyUsage(8, 'The column is read-only and is not editable');
});
New Fiddle
Working code is:
Java Script Code:
$(document).ready(function () {
$('#txtCode').bind('keypress keydown', function (e) {
if (e.which == 8) {
alert('The column is read-only and is not editable');
}
});
});
Here is the updated code
<input type="text" id="txtCode" />
$(document).ready(function () {
$('#txtCode').bind('keydown', function (e) {
if (e.which == 8) {
alert('The column is read-only and is not editable');
return false;
}
});
});
Fiddle Demo
Try this
$(document).ready(function () {
$('#txtCode').on('keyup', function (e) {
if (e.which == 8) {
alert('The column is read-only and is not editable');
}
});
});
DEMO (Working on Firefox & Chrome)
$('#textbox').keydown(function(event){
if(event.keyCode == 8){
alert("Backspace not allowed..");
return false;
}
});
http://jsfiddle.net/xF9jL/1/
You are missing }); of keypress. google chrome have issues with keypress, u can try keydown instead
$(document).ready(function () {
$('#txtCode').bind('keydown', function (e) {
if (e.which == 8) {
alert('The column is read-only and is not editable');
}
});
});
To use delete ,arrows, backspace keys in Chrome you must use keydown. keypress on these keys work only in Firefox and Opera.
DEMO
You can probably solve the underlying issue by either not using an element that accepts input, or by using the disabled attribute:
<textarea name="example" disabled>Some text</textarea>
If you are posting back to the sever, you should assume the user has edited the field, no matter what you do to prevent it.
keypress event won't give keycodes for all keys in all browsers . Better use keyup or keydown event which gives keycode for all keys in all browsers
In order to understand the difference between keydown and keypress, it is useful to understand the difference between a "character" and a "key". A "key" is a physical button on the computer's keyboard while a "character" is a symbol typed by pressing a button. In theory, the keydown and keyup events represent keys being pressed or released, while the keypress event represents a character being typed. The implementation of the theory is not same in all browsers.

Keypress to change class in jQuery

I have a problem I can't seem to sort out.
I have a form with a custom styled button (input type=button). When typing in the text field, I want people to be able to press the TAB key and go to the button. However, it won't use a tab-index so my solution was to highlight the label and change the CSS to give the button a new border color. However, the border color will not change on keypress in any browser other than Firefox.
Here is what I have:
$(function() {
$("#email").bind("keypress", function(e) {
if (e.keyCode == 13) {
send();
return false;
};
if (e.keyCode == 9) {
$("#submit_btn").removeClass('submit1').addClass('submit1after');
};
});
};
The first enter keypress is to serialize and email the form and all.
I can't seem to get it to work for the life of me. What am I doing wrong? Is there a better solution to what I'm trying to accomplish?
Thanks for taking the time,
Armik
Use keydown instead, for me that works (see demo: http://jsfiddle.net/npGtX/2/)
$(function () {
$("#email").bind("keydown", function (e) {
if (e.keyCode == 13) {
send();
return false;
};
if (e.keyCode == 9) {
$("#submit_btn").removeClass('submit1').addClass('submit1after');
};
});
};
Also I found this: Suppressing keyPress for non-character keys?
keypress is not necessarily triggered when the keypress is not a
character. So the browser may not trigger an event on backspace, F1,
the down key, etc.
You can use the keyup event and event object's which property, jQuery normalizes the which property and it's cross-browser:
$(function() {
$("#email").bind("keyup", function(e) {
if (e.which == 13) {
send();
return false;
};
if (e.which == 9) {
$("#submit_btn").toggleClass('submit1 submit1after');
};
});
};
$(function() {
$("#email").keypress(function(e) {
if (e.keyCode == 13 || e.which== 13) {
send();
return false;
};
if (e.keyCode == 9 || e.which== 9) {
$("#submit_btn").removeClass('submit1').addClass('submit1after');
};
});
};

Hiding a div on Mouse click out OR escape keyword press

I have the following code that hides my div (live search results) when mouse is clicked outside the div but I can't incorporate an OR function that does the same thing (hides div) when the escape key is pressed. Any help is much, much appreciated. Also, original code on mouse click out is from a different thread I got here on Stackoverflow. The or function is giving me a hard time.
var mouse_is_inside = false;
$(document).ready(function()
{
$('.form_content').hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$("body").mouseup(function(){
if $('#display').hide();
});
});
This hides #display on pressing escape:
$(document).keyup(function(event) {
if(event.which === 27) {
$('#display').hide();
}
});
Example: http://jsfiddle.net/nsufH/
You could also try to use window instead of document:
$(window).keyup(function(event) {
if(event.which === 27) {
$('#display').hide();
}
});
Or try to use live:
$(document).live('keyup', function(event){
if(event.which === 27) {
$('#display').hide();
}
});
Basically you need to monitor for the KeyCode and act based off it:
$(document).keyup(function(e) {
if (e.keyCode == 27) { $('#display').hide() } // esc
});
$(document).ready(function() {
$(document).on('mouseup keyup', function(e){
var e = e || event,
code = (e.keyCode ? e.keyCode : e.which),
target = e.srcElement || e.target;
if (target.className != 'form_content' || code==27) {
$('#display').hide();
}
});
});
Here is the jsfiddle hiding a div on mouseout and ESC key press :
http://jsfiddle.net/jrm2k6/q2kNX/
Of course there is probably some stuff to do in the way to adapt it as your own source code..

Categories