I'm trying to test the keydown event on a text box to determine if a character supplied, is valid or not, but this is turning out to be an impossible task.
I have a selector, like such:
$('<input type="text" id="rwSearchText" />').appendBody('body');
I have a function then that defines the check for the valid keys:
var addKeyDownEvent = function() {
$('#rwSearchText').keydown(function(event) {
var keyCode = event.which;
if ((keyCode > 64 && keyCode < 91) || keyCode === 189 || keyCode === 222 || keyCode === jQuery.ui.keyCode.BACKSPACE
|| keyCode === jQuery.ui.keyCode.DELETE || keyCode === jQuery.ui.keyCode.SPACE
|| keyCode === jQuery.ui.keyCode.LEFT || keyCode === jQuery.ui.keyCode.RIGHT
|| keyCode === jQuery.ui.keyCode.SHIFT || keyCode === jQuery.ui.keyCode.END
|| keyCode === jQuery.ui.keyCode.HOME) {
return true;
}
else {
return false;
}
});
};
I call this, in the beforeEach() method along with the appendTo('body') to create the textbox I need to test against:
beforeEach(function ()
{
rwSearchText = $("<input type=\"text\" id=\"#rwSearchText\" />").appendTo("body");
addKeyDownEvent();
});
rwSearchText is defined globally.
then in my define -> it('# should not be allowed', function() {}); I'm triggering the keydown manually:
describe("rwSearchText", function() {
it("single dash should be allowed", function() {
rwSearchText.val('&');
rwSearchText.trigger('keydown');
var results = rwSearchText.val();
});
});
but the keydown event is never fired.
Is there something I'm missing? I've Googled similar scenarios but what I've done seems correct. Any help would be really appreciated.
Related
Ace editor
read only region required
you can use the exec event on editor.commands to disable non readonly commands if wrong lines are selected
body,html {
height: 90%
}
<script src=https://ajaxorg.github.io/ace-builds/src/ace.js></script>
<script>
editor = ace.edit(document.body)
editor.setOptions({
mode: "ace/mode/javascript"
});
editor.commands.on("exec", function(e) {
if (e.command.readOnly)
return;
var editableRow = editor.session.getLength() - 1;
var deletesLeft = e.command.name == "backspace" || e.command.name == "removewordleft";
debugger
var notEditable = editor.selection.getAllRanges().some(function(r) {
if (deletesLeft && r.start.column == 0 && r.end.column == 0) return true;
return r.start.row != editableRow || r.end.row != editableRow;
});
if (notEditable)
e.preventDefault();
});
</script>
How can I check until an element is clickable using nightwatch js? I want to click on an element but when I run nightwatch, selenium does not click on the element because it is not clickable yet.
Something like this should work. Let me know if you have questions
var util = require('util');
var events = require('events');
/*
* This custom command allows us to locate an HTML element on the page and then wait until the element is both visible
* and does not have a "disabled" state. It rechecks the element state every 500ms until either it evaluates to true or
* it reaches maxTimeInMilliseconds (which fails the test). Nightwatch uses the Node.js EventEmitter pattern to handle
* asynchronous code so this command is also an EventEmitter.
*/
function WaitUntilElementIsClickable() {
events.EventEmitter.call(this);
this.startTimeInMilliseconds = null;
}
util.inherits(WaitUntilElementIsClickable, events.EventEmitter);
WaitUntilElementIsClickable.prototype.command = function (element, timeoutInMilliseconds) {
this.startTimeInMilliseconds = new Date().getTime();
var self = this;
var message;
if (typeof timeoutInMilliseconds !== 'number') {
timeoutInMilliseconds = this.api.globals.waitForConditionTimeout;
}
this.check(element, function (result, loadedTimeInMilliseconds) {
if (result) {
message = '#' + element + ' was clickable after ' + (loadedTimeInMilliseconds - self.startTimeInMilliseconds) + ' ms.';
} else {
message = '#' + element + ' was still not clickable after ' + timeoutInMilliseconds + ' ms.';
}
self.client.assertion(result, 'not visible or disabled', 'visible and not disabled', message, true);
self.emit('complete');
}, timeoutInMilliseconds);
return this;
};
WaitUntilElementIsClickable.prototype.check = function (element, callback, maxTimeInMilliseconds) {
var self = this;
var promises =[];
promises.push(new Promise(function(resolve) {
self.api.isVisible(element, function(result) {
resolve(result.status === 0 && result.value === true);
});
}));
promises.push(new Promise(function(resolve) {
self.api.getAttribute(element, 'disabled', function (result) {
resolve(result.status === 0 && result.value === null);
});
}));
Promise.all(promises)
.then(function(results) {
var now = new Date().getTime();
const visibleAndNotDisabled = !!results[0] && !!results[1];
if (visibleAndNotDisabled) {
callback(true, now);
} else if (now - self.startTimeInMilliseconds < maxTimeInMilliseconds) {
setTimeout(function () {
self.check(element, callback, maxTimeInMilliseconds);
}, 500);
} else {
callback(false);
}
})
.catch(function(error) {
setTimeout(function () {
self.check(element, callback, maxTimeInMilliseconds);
}, 500);
});
};
module.exports = WaitUntilElementIsClickable;
Add this code as a file to your commands folder. It should be called waitUntilElementIsClickable.js or whatever you want your command to be.
Usage is:
browser.waitUntilElementIsClickable('.some.css');
You can also use page elements:
var page = browser.page.somePage();
page.waitUntilElementIsClickable('#someElement');
You can use waitForElementVisible() combined with the :enabled CSS pseudo-class.
For example, the following will wait up to 10 seconds for #element to become enabled, then click it (note that the test will fail if the element doesn't become enabled after 10 seconds):
browser
.waitForElementVisible('#element:enabled', 10000)
.click('#element');
Can you show an example element,usually there should be an attribute name "disabled" if the button is not clickable, this should work.
browser.assert.attributeEquals(yourCSS, 'disabled', true)
I'm unable to comment but there are a couple of issues with the code suggested by Alex R.
First, the code will not work with Firefox as geckodriver does not return a 'status'. So this:
resolve(result.status === 0 && result.value === true)
needs to be changed to this:
resolve(result.value === true).
Second, the line:
self.client.assertion(result, 'not visible or disabled', 'visible and not disabled', message, true);
doesn't work and needs to be commented out in
order to get the code to run.
$('body').keypress(function(event){
if(event.keyCode == 46){console.log('Delete Key Pressed')}; //does not work
if(event.keyCode == 32){console.log('SPACE BAR')}; //works
})
Why doesn't the delete key show up in THIS FIDDLE ?
Instead of keypress, use the keyup or keydown event: keypress is meant for PRINTABLE characters, whereas keydown will capture non-printing key presses including delete, backspace, and return.
http://jsfiddle.net/5cNTn/9/
$('body').keydown(function(event){
var letter = String.fromCharCode(event.which);
if(event.keyCode == 32){console.log('SPACE BAR');}
if(event.keyCode == 46){console.log('Delete Key Pressed');}
console.log(event);
console.log(event.keyCode);
});
Use keydown and modern JS!
document.addEventListener("keydown", function(event) {
if (event.key === "Delete") {
// Do something
}
});
Modern style, lambda + destructuring
document.addEventListener("keydown", ({key}) => {
if (key === "Delete") {
// Do something
}
})
I have the following code. how can I make it short so it work with click and enter so I dont have to duplicate it.
$(document).ready(function(){
$(document).keypress(function(e) {
if(e.which == 13) {
$('form#myform').submit();
}
});
$('#mybutton').click(function() {
$('form#myform').submit();
});
});
this would be a shorter one, it takes advantage of the event bubbling:
$(document).ready(function(){
$(this).on('keypress click', function(e) {
if(e.which == 13 || e.target.id==='mybutton')
$('form#myform').submit();
});
});
this is how it works: http://jsfiddle.net/e6L3W/
Try this:
(Although use of $(this) on document ready is not clear or might be its a typo and it supposed to be a input box.)
Hope this helps the cause and also read the link below: :)
Submitting a form on 'Enter' with jQuery?
code
$(document).ready(function(){
$('#search').keypress(function(event) { //<<== #search is input box id
if ( event.which == 13 ) {
$('#mybutton').trigger('click');
}
})
$('#mybutton').click(function() {
$('form#myform').submit();
});
});
OR
var myFunction = function() {
$('form#myform').submit();
}
$('#search').keypress(function(event) { //<<== #search is input box id
if ( event.which == 13 ) {
myFunction;
}
})
$('#mybutton').click(myFunction);
OR
You could try chaining like this:
This will bind #element to the events but might be you are looking to bind 2 separate elements with 2 separate event but same outcome.
$('#element').bind('keypress click', function(e) {
...
});
$(document).ready(function(){
$(this).bind('keypress click', function(e) {
if(e.type == 'click') {
if(e.target.id == 'mybutton') {
$('form#myform').submit();
}
} else if(e.type == 'keypress') {
if(e.which == 13) {
$('form#myform').submit();
}
}
});
});
I know that e.preventDefault(); is supposed to stop the spacebar from scrolling on the page, but it is not working on my function
$("html").live("keyup", function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if ((code == 32 || code == 13) && $("span").is(":focus")) {
openDropdown();
$(".dropdown a.PivotItem:first").focus();
e.preventDefault();
} else if ((code == 32 || code == 13) && $("a.PivotItem").is(":focus")) {
closeDropdown();
changeSelected($("*:focus"));
e.preventDefault();
} else if (code == 27 && ($("span").is(":focus") || $(".dropdown a.PivotItem").is(":focus"))) {
closeDropdown();
$("span").focus();
} else {
//do nothing
}
});
Does it have something to do with the .live( handler I have included?
The space-bar scrolls the page on keydown, not on keyup, so try:
$("html").on("keydown", function (e) {
// etc
You don't really need to use .live(), because the html element will exist when your code runs.
Also, jQuery normalises event.which so you don't need to test for event.keyCode.