I know this question has been asked here. Basically the solution works but they are using an old version of jquery and the solution was implemented using deprecated functions. So I tried to migrate to the new version, according to answers and questions from this question.
So basically the solution using the old jquery version is this one.
$('textarea.paginate').live('keydown', function(event) {
if (this.clientHeight < this.scrollHeight) {
alert("Please Something);
}
});
This was my migration to the on function, but neither way works. Demo of the example: http://jsbin.com/saxay/1/edit
What I'm doing wrong?
$("textarea").on('keyup','.note-codable',function(event){
if(event.keyCode == 13) { }
if (this.clientHeight < this.scrollHeight) {
alert("Please Something");
}
});
$(document).on('keyup','.note-codable',function(event){
if(event.keyCode == 13) { }
if (this.clientHeight < this.scrollHeight) {
alert("Please Something");
}
});
Fixed your problem
You just had to use .on at the place of live in your first approach.
$('textarea.paginate').on('keydown', function(event) {
// scrollbars apreared
if (this.clientHeight < this.scrollHeight) {
alert("Please add a new card for having a better format. Remember this is a WYSIWYG");
}
});
DEMO
UPDATED
try this approach: DEMO
$.fn.hasVerticalScrollBar = function() {
if (this[0].clientHeight < this[0].scrollHeight) {
return true
} else {
return false
}
};
$(document).on('keydown','.note-codable',function(event){
if(event.keyCode == 13) { }
if ($(this).hasVerticalScrollBar()) {
alert("Please Something");
}
});
also if you notice I've changed the keyup event to keydown which is better in my opinion 'cause when the user holds their finger down on a button the code wouldn't be fired if it is on the keyup event.
Related
The code:
document.getElementById("theid").onfocus=function fone(){
document.onkeypress = function(myEvent) {
var code = myEvent.which;
if ((code === 13) || (code === 32)) {
document.querySelector('.someclass').click();
}
}
}
I can't get what is wrong with my code...
I'm trying to call the click() when Enter or Space buttons are used while the element in focus.
EDIT
Sorry, I just got too much of learning the code for today, I guess. The case wasn't the click event. The code is correct.
You could use JQuery to get this. Please see the following fiddle:
https://jsfiddle.net/ko842xbp/
document.getElementById("theid").onfocus=function fone(){
document.onkeypress = function(myEvent) {
var code = myEvent.which;
if ((code === 13) || (code === 32)) {
$('.someclass').click();
}
}
}
$('.someclass').click(function(){
alert(".someclass was clicked")
});
I have created an ajax dropdown, i need to change the background color of the dropdown values when i press the down arrow and up arrow key.Here when i press the key background changes and it disappears immediately.it's not working in the ajax dropdown, if i put and alert before setting the class selectedhash, it's working else it's not working.
Here the div will be updated by the ajax results with list.
Please help me to solve this.
<div class='textautocomplete'>
</div>
$(document).on("keydown", function(e) {
if (e.keyCode == 40)
{
if(chosen === "")
{
chosen = 0;
} else if((chosen+1) < $('.textautocomplete ul').length)
{
chosen++;
}
$('.textautocomplete ul').removeClass('selectedhash');
$('.textautocomplete ul:eq('+chosen+')').addClass('selectedhash');
return false;
}
if (e.keyCode == 38) {
if(chosen === "") {
chosen = 0;
} else if(chosen > 0) {
chosen--;
}
$('.textautocomplete ul').removeClass('selectedhash');
$('.textautocomplete ul:eq('+chosen+')').addClass('selectedhash');
return false;
}
});
$(".textinput").live("keyup",function(e)
{
$.post('/users/getusers',{data:dataString},function(result){
if(result!=='')
{
$('.textautocomplete').show();
$('.textautocomplete').html(result);
}
else
{
$('.textautocomplete').hide();
$('.textautocomplete').html('');
}
});
return false
});
Firstly change: ".live" to: ".on" in line:
$(".textinput").live("keyup",function(e)
because:
"As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live()."
More: jQuery .live() method
Secondly add keyCode filter code in:
$(".textinput")
For example:
if ( e . keyCode == 38 || e . keyCode == 40 ) { return false; }
Working example fiddle: JSFiddle
I'm trying to turn a button-click into a toggle that enables or disables a function, depending on its state. The function allows the enter key to be used for a form submission.
var enterToggle = true;
function enterToggleListener(elem) {
enterKeyPress();
elem.click(function() {
enterToggle = !enterToggle;
console.log('enter-toggle clicked')
if (enterToggle === false) {
console.log('enter toggle false')
// What do I need to add here to stop 'enterKeyPress()'?
} else {
console.log('enter toggle true')
enterKeyPress();
}
});
}
function enterKeyPress() {
$('#noteText').keypress(function(e){
if(e.which == 13){
$('#noteButton').click();
}
});
}
enterToggleListener($('#toggle-button'));
What I don't understand is how to stop the enterKeyPress() function when enterToggle is false. Any suggestions?
EDIT: Cleaned-up code, with #James Montagne's answer added
var enterToggle = true;
function enterToggleListener(elem) {
elem.click(function() {
enterToggle = !enterToggle;
if (enterToggle === false) {
$('#enter-toggle').text('Enter key saves note (OFF)')
} else {
$('#enter-toggle').text('Enter key saves note (ON)')
}
});
}
function enterKeyPress() {
$('#noteText').keypress(function(e){
if(enterToggle && e.which == 13){
$('#noteButton').click();
}
});
}
enterKeyPress();
enterToggleListener($('#enter-toggle'));
function enterKeyPress() {
$('#noteText').keypress(function(e){
if(enterToggle && e.which == 13){
$('#noteButton').click();
}
});
}
You can simply check the value of the variable within your handler. This way you don't need to keep adding and removing the handler as seems to be your current approach.
However, if you must add and remove for some reason, you would use off.
Simply I have a js script that change the page with left and right arrows, but how to stop that if a specific textarea is selected ?
This is my js to change the page
$(document).keydown(function(event) {
if(event.keyCode === 37) {
window.location = "http://site.com/pics/5";
}
else if(event.keyCode === 39) {
window.location = "http://site.com/pics/7";
}
});
$('textarea').on('keypress', function(evt) {
if ((evt.keyCode === 37) || (evt.keyCode === 39)) {
console.log('stop propagation');
evt.stopPropagation();
}
});
See example fiddle: http://jsfiddle.net/GUDqV/1
Update: after OP clarification this works even on jQuery 1.2.6 on Chrome: http://jsfiddle.net/GUDqV/2/
$('textarea').bind('keyup', function(evt) {
if ((evt.keyCode === 37) || (evt.keyCode === 39)) {
console.log('stop propagation');
evt.stopPropagation();
}
});
see screenshot of this code on Chrome and jQ1.2.6
Probably the simplest approach is to factor event.target into your code, checking to see if it is the textarea:
$(document).keydown(function(event) {
if (event.target.id == "myTextArea") {
return true;
}
else if(event.keyCode === 37) {
window.location = "http://site.com/pics/5";
}
else if(event.keyCode === 39) {
window.location = "http://site.com/pics/7";
}
});
Any key events that originate from a textarea element with an id of myTextArea will then be ignored.
You can check if the textarea is in focus by doing something like:
if (document.activeElement == myTextArea) {
// Don't change the page
}
$("#mytextarea").is(":focus") This will let you know if the element is focused.
Also $(document.activeElement) will get the currently focused element.
You can check to see if your text area is focused, and disable the script that navigates when using left and right arrow keys.
A little bit of code showing what you've tried might bring in more specific responses.
Hope this helps.
I know this is not the best thing to do in view of accessibility, but I have a genuine need to disable the user from zooming onto the page using CTRL+ in IE7.
I got it working for the other browsers the following way, but IE7 seems to ignore the "return false":
$(window).keydown(function (e) {
alert('key is down'); // this fires
return false; // but this has no effect in IE7!
});
This is better and correct way:
$(document).ready(function() {
var ctrl = false;
$(document).keydown(function(e){
// disable ctrl + +/-
if(ctrl && (e.keyCode == 107 || e.keyCode == 109)) {
alert('Zoom is disabled!');
return false;
}
if(e.keyCode == 17) {
ctrl = true;
// disable ctrl + scroll
$(document).bind('scroll', function() {
if(ctrl) {
alert('Zoom is disabled!');
return false;
}
});
}
})
$(document).keyup(function(e) {
if(e.keyCode == 17) {
ctrl = false;
$(document).unbind('scroll');
}
});
});
Try attaching keydown to document instead:
$(document).keydown(function (e) {
alert('key is down');
return false;
});
This is pointless if the end user's browser already has the zoom set before visiting your page.
simple answer. for IE, you need Event.stop(e); instead of return false;
I don't have IE7 to test on ATM but this should do it
$(window).keydown(function (e) {
alert('key is down'); // this fires
e.preventDefault(); // This is a standard jQuery way of
// preventing the default action
return false; // Therefore you shouldn't need this.
});