I have a function that runs when the user presses the esc button:
$(document).on('keyup', function (e) {
if (e.keyCode == 27) {
foo();
}
});
I have a form with a file field.
<input type="file" />
When you click it, it opens a file-manager dialog, which can be closed with the esc as well. In that case, I want to avoid running the foo function. Is there a way to recognize it with javascript?
Here is some code that can do what you want (a complete test-page):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>test-page</title>
<script type="text/javascript">
//<!--
var ignr=false;
function func(e)
{ if(!ignr)
{ //add any key-specific tests here
foo();
}
ignr = false;
return;
}
function foo()
{
return;
}
function func2(e)
{ //Could add a condition to do/not-do the next line, depending on the key...
ignr = true;
return;
}
// -->
</script>
</head>
<body onkeyup="func(event);">
<input type="file" onkeyup="func2(event);" />
</body>
</html>
The trick is to assign a different function to the input tag. This won't prevent the other function from being called, but the herein-specified func2() is called first, giving you the chance to set a flag-variable that can control what gets done in the "main" onkeyup function. Note while I didn't specify any tests for the Escape key, you can certainly add them, and even completely control which keys you want to allow "through" func2() to call foo() inside the main onkeyup function. At the moment, no keys pressed during the file-input will have any chance of calling foo().
Related
I'm trying to create a chrome extension that clicks a button on a website using the DOM.click() method. (https://www.w3schools.com/jsref/met_html_click.asp)
EDIT: The purpose of this chrome extension is to create a keyboard shortcut to toggle on/off English Subtitles while watching a foreign language video. Having to use your mouse and dragging it to open a menu to turn on subtitles when you need them can be inconvenient if you are trying to understand the language without the subtitles. I wanted to create a keyboard shortcut that would immediately turn on the subtitles. An example of such a website is
(https://www.ondemandkorea.com/ask-us-anything-e102.html)
<button type="button" class="jw-reset jw-settings-content-item" role="menuitemradio" aria-checked="false">English</button>
This is button on the website I'm trying to click with Javascript
In my code, I have a window listener that waits for the specific website to load. Then, to find the button I want to click, I call document.getElementsByClassName("Class Name") and look through the returned elements array for a button that that says English and save it into var englishButton. I add another listener that listens for a keyboard key to be pressed which in turn presses englishButton.
However, when I click the shortcutKey, englishButton.click(); doesn't seem to do anything. I know that the correct English Button is found and that my shortcutKey Listener works through the use of console.log() statements.
I can't seem to understand why the button won't click.
EDIT: After adding a buttonListener to the code, the English button does click after all, but it does not turn on the subtitles for the video
Here's my code.
/*
Looking for the subtitle button that states "English"
*/
var englishButton;
window.addEventListener("load", function(event) {
var buttonList = document.getElementsByClassName('jw-reset jw-settings-content-item');
for (var i = 0, len = buttonList.length; i < len; i++){
if(buttonList[i].textContent === "English") {
englishButton = buttonList[i];
break;
}
}
englishButton.addEventListener('click', function() {
console.log('englishButton clicked!');
});
/*
Event Listener that detects when the shortcut key is hit.
When the shortcut Key is hit. It will simulate a mouse click on the subtitle button
*/
document.addEventListener('keyup', function(e){
if(e.key === shortcutKey){
console.log('shortcut pressed')
englishButton.click();
}
}
);
});
In your comments under your question, you confirmed that the button is actually triggering the click. So the issue for you is rather producing the intended result from the click. Which is to toggle on and off the English caption. There's a better, simpler, and much more reliable alternative here.
The website uses JW Player to show its video. They have a well-documented and open API (https://developer.jwplayer.com/jw-player/docs/developer-guide).
All you have to do is something like this
jwplayer().setCurrentCaptions(X)
Here X is the index number of the caption option you want to select from within the list of all captions that are available in a particular video.
In your example video, the list has only two items:
0: Off
1: English
So to turn on English:
jwplayer().setCurrentCaptions(1)
And to turn off all caption:
jwplayer().setCurrentCaptions(0)
If the index would vary from one video to another, you need to first get the list of captions available and then find the index number for English.
let allCaptions = jwplayer().getCaptionsList();
englishCaptionIndex = allCaptions.findIndex(caption => caption.label == 'English');
That's it.
You can do all kinds of interesting things using the API.
I recommend you to use jQuery, so you can use functions like keyup() or keydown() so you can listen when a key is pressed. Also a better practice is to check the element by id if we only want to watch over a DOM element instead of using a class.
Move all your code into your load listener:
https://codepen.io/ryanpcmcquen/pen/EOerPM?editors=1011
window.addEventListener("load", function(event) {
/*
Looking for the subtitle button that states "English"
*/
var englishButton;
// console.log('Website loaded. englishButton:', englishButton);
var buttonList = document.getElementsByClassName("jw-reset");
for (var i = 0, len = buttonList.length; i < len; i++) {
if (buttonList[i].textContent === "English") {
englishButton = buttonList[i];
// console.log("englishButton found", englishButton);
break;
}
}
// console.log("End of window-load's callback. englishButton:", englishButton);
/*
Event Listener that detects when the shortcut key is hit.
When the shortcut Key is hit. It will simulate a mouse click on the subtitle button
*/
document.addEventListener("keyup", function(e) {
console.log(
"Inside document-keyup's callback. englishButton:",
englishButton
);
if (e.key == "z") {
//Logic to press the subitle button
console.log(
"Key matched: ",
e.key,
"Now click button. englishButton:",
englishButton
);
englishButton.click();
console.log("Shortcut Key");
} else {
console.log("Random Key");
}
});
englishButton.addEventListener("click", function() {
console.log("englishButton clicked!");
});
});
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<button type="button" class="jw-reset">English</button>
</body>
</html>
But there are some things that could be improved in your code, so let's take a look at a more 'modernized' version of your code (comments in code):
// Using the `window` `load` event is fine, but
// you should prefer the `document` `DOMContentLoaded`
// event when possible, since it fires when the DOM
// has been constructed, while `load` means all assets have fully loaded (images).
// For your case since you are relying only on elements,
// `DOMContentLoaded` is a better choice.
document.addEventListener("DOMContentLoaded", function(event) {
/*
Looking for the subtitle button that states "English"
*/
var englishButton;
// Use `querySelectorAll` since it is more dynamic and
// will accept any type of selector. Also, for loops
// are avoided in most modern JavaScript because
// they create scoping and off-by-one errors.
// Since you want to break out of the loop here,
// we will use `.some()`. `Array.prototype.slice.call()`
// converts the NodeList returned by `querySelectorAll`
// into an Array.
Array.prototype.slice.call(document.querySelectorAll(".jw-reset")).some(
function (button) {
if (button.textContent === 'English') {
englishButton = button;
return true;
}
}
);
/*
Event Listener that detects when the shortcut key is hit.
When the shortcut Key is hit. It will simulate a mouse click on the subtitle button
*/
document.addEventListener("keyup", function(e) {
console.log(
"Inside document-keyup's callback. englishButton:",
englishButton
);
if (e.key === "z") {
//Logic to press the subitle button
console.log(
"Key matched: ",
e.key,
"Now click button. englishButton:",
englishButton
);
englishButton.click();
console.log("Shortcut Key");
} else {
console.log("Random Key");
}
});
englishButton.addEventListener("click", function() {
console.log("englishButton clicked!");
});
});
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<button type="button" class="jw-reset">English</button>
</body>
</html>
I have one function and I need to start in on click or on pressing Enter key.
So I'd need something like:
<BUTTON onclick="searchProduct()" or onkeypress="searchProduct()">Hledat</BUTTON>
But only on pressing Enter. Not on any key.
Is this possible for Ajax or plain javascript?
OK, didn't expect that it is so complicated, so I give you whole of my code, because your answers are not working for my whole code...
<!DOCTYPE html>
<HTML>
<HEAD>
<META charset="UTF-8" />
<TITLE>Searchin engine</TITLE>
</HEAD>
<BODY>
<SCRIPT src="js_search.js"></SCRIPT>
<FORM>
<INPUT type="text" id="word" size="40" />
</FORM>
<BUTTON onclick="searchProduct(document.getElementById('word').value)">Hledat</BUTTON>
<P id="display"></P>
</BODY>
</HTML>
Just add event listeners in your javascript (above your searchProduct() function, for instance)
document.getElementById('button').addEventListener('click', function(){
searchProduct(document.getElementById('word').value);
})
document.getElementById('button').addEventListener('keydown', function(e){
if(e.keyCode == 13) searchProduct(document.getElementById('word').value); // the keyCode 13 is equivalent to the enter key
})
function searchProduct(val) {
alert(val);
}
<button id="button">Hledat</button>
<input id="word" value="foo"/>
Hope this helps!
Ideally, you should have individual events on element and enter, you can either call specific function or you can trigger element's click.
If you wish enter and button click work same, I would suggest to trigger click event. This will make sure all UI states are updated and all processing are done. Reason for this is, we can add multiple handlers to a button for different processing and calling functions might not call other code.
function keyPress(e) {
if (e.keyCode == 13) {
document.getElementById("btn").click();
}
}
function notify() {
console.log("Processing...")
}
<input type="text" id="txt" onkeyup="keyPress(event)">
<button id="btn" onclick="notify(event)">Notify</button>
You can do:
<BUTTON onclick="searchProduct()" onkeypress="searchProductKeyPress(event)">Hledat</BUTTON>
function searchProductKeyPress(event) {
if (event.which == 13 || event.keyCode == 13) {
searchProduct();
return false;
}
return true;
}
In the function you can pass the event like this:
<BUTTON onclick="searchProduct(event)" onkeypress="searchProduct(event)">Hledat</BUTTON>
Now in the function:
searchProduct(e){
if(e.type === 'keypress' && e.keyCode !== 13){
return;
}
// put the code for search here.
}
set id="btn_search_product" to your button
var btn_search_product = document.getElementById("btn_search_product");
btn_search_product.addEventListener("keydown", function (e) {
if (e.keyCode === 13) {
searchProduct(e);
}
});
I actually use evento library https://github.com/petermichaux/evento
with it it would be:
evento.add(btn_search_product, "keydown", function (e) {
if (e.keyCode === 13) {
searchProduct(e);
}
});
I have the following if statement that looks for a hash on document ready (this code NEVER runs again on the page). And if there is no hash then add one using replace, so that it doesn't trigger a hashchange event.
if( window.location.hash == '' ) {
console.log('no hash');
location.replace(location.href.replace(/\/?$/, '#/section-0/page-0')); // change the url without creating a hashchange
} else {
console.log('has hash');
}
However if I visit the page with no hash, what I will see in the console is has hash and the replace will have happened... how is this possible? as that console log is in a different part of the statement. If I comment out the replace then it only falls into the first part of the if statement. How can it jump into the if statement do the replace (but ignoring the first console log) and then jump into the second part?
What you are saying doesn't make sense.
I tried to make a full example from your code:
<html>
<head>
<script type='text/javascript'>
function x()
{
if( window.location.hash == '' )
{
console.log('no hash');
location.replace(location.href.replace(/\/?$/, '#/section-0/page-0')); // change the url without creating a hashchange
alert('changed!');
}
else
{
console.log('has hash');
}
}
</script>
</head>
<body>
<button onclick="javascript:x()">test</button>
</body>
</html>
This code executes as follows when opening default:
Click button
Console no hash
Alert
Click button
Console has hash
If you put the code without function declaration inside the body (so it always executes), like this:
<html>
<body>
<script type='text/javascript'>
if( window.location.hash == '' )
{
console.log('no hash');
location.replace(location.href.replace(/\/?$/, '#/section-0/page-0')); // change the url without creating a hashchange
alert('changed!');
}
else
{
console.log('has hash');
}
</script>
</body>
</html>
It shows:
Console no hash
Alert
** Note: I just figured out how to call functions through functions and as such don't really need a lot of help with this. But if there is a cleaner method of doing this. Please let me know!
Okay, so I'm really new to javascript and HTML so don't hate me if I don't understand some of the basics. From what I know this code I've come up with should be working. Anyways, what I want to do is have a blank text box for someone to input text into. When they input text using the onchange command I want that textbox's new value to be the trigger for a button to show up using the "if" statement in Javascript.
For example: If someone inputs into the test box the word "test". When they click outside of the box again I would like a button to show up (what it says is irrelevant). But if they put anything else that isn't equal to the word "test" it won't show a button up.
This is the following code I have.
<html>
<head>
<script>
window.onload=function(){
document.getElementById("button").style.display='none';
}
function textCheck(){
if (document.getElementById("userText").value == "test") alert("hello");
}
</script>
</head>
<body>
<input type="button" id="button" value="New Button"/>
<input type="text" id="userText" onchange="textCheck()"/>
</body>
</html>
I will note that the previous code was done in part with help from other stackoverflow searches. However, this gives me an alert. What I want is a button. So instead of the alert line I need it to run another function to show the button.
Would this following code work?
}
function showButton(){
document.getElementById("button").style.display='block';
}
And if so, how do I replace the alert with code to run a second function? If anyone has any better ideas it would be greatly appreciated.
I think the event you are looking for is onblur not onchange.
The correct implementation would look like this.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
window.onload = function() {
document.getElementById("button").style.display = 'none';
}
function textCheck() {
if (document.getElementById("userText").value == "test") {
alert("incorrect value");
document.getElementById("userText").value = ""; // clearing input field
document.getElementById("userText").focus(); // setting the focus on the input
return false;
} else {
return true;
}
}
</script>
</head>
<body>
<input type="button" id="button" value="New Button"/>
<input type="text" id="userText" onblur="textCheck()" />
</body>
</html>
Hope it helps!!!!
I hope i got what you need and here's the code:
window.onload = function() {
document.getElementById("button").style.display = 'none';
}
function textCheck() {
if (document.getElementById("userText").value == "test") {
//document.getElementById("button").style.display = 'block';
//Alternate
enableButton();
} else {
hideButton();
document.getElementById("userText").value = "";
//This is for clear the text in text field.
}
}
function enableButton() {
document.getElementById("button").style.display = 'block';
}
function hideButton() {
document.getElementById("button").style.display = 'none';
}
Well, you do have all the pieces to get this to work. By putting the code traling the if statement inside curly brackets, you create a code block to be executed when the condition is true.
function textCheck(){
if (document.getElementById("userText").value == "test") {
document.getElementById("button").style.display='block';
}
}
You could try doing something along the lines of this:
var theBtn = document.getElementById("button");
theBtn.addEventListener('click', textCheck, false)
function textCheck(){
if (document.getElementById("userText").value == "test") {
alert("hello");
};
}
Here's a JSFiddle
Using JavaScript how do you to detect what text the user pastes into a textarea?
You could use the paste event to detect the paste in most browsers (notably not Firefox 2 though). When you handle the paste event, record the current selection, and then set a brief timer that calls a function after the paste has completed. This function can then compare lengths and to know where to look for the pasted content. Something like the following. For the sake of brevity, the function that gets the textarea selection does not work in IE. See here for something that does: How to get the start and end points of selection in text area?
function getTextAreaSelection(textarea) {
var start = textarea.selectionStart, end = textarea.selectionEnd;
return {
start: start,
end: end,
length: end - start,
text: textarea.value.slice(start, end)
};
}
function detectPaste(textarea, callback) {
textarea.onpaste = function() {
var sel = getTextAreaSelection(textarea);
var initialLength = textarea.value.length;
window.setTimeout(function() {
var val = textarea.value;
var pastedTextLength = val.length - (initialLength - sel.length);
var end = sel.start + pastedTextLength;
callback({
start: sel.start,
end: end,
length: pastedTextLength,
text: val.slice(sel.start, end)
});
}, 1);
};
}
var textarea = document.getElementById("your_textarea");
detectPaste(textarea, function(pasteInfo) {
alert(pasteInfo.text);
// pasteInfo also has properties for the start and end character
// index and length of the pasted text
});
HTML5 already provides onpaste not only <input/> , but also editable elements (<p contenteditable="true" />, ...)
<input type="text" onpaste="myFunction()" value="Paste something in here">
More info here
Quite an old thread, but you might now use https://willemmulder.github.io/FilteredPaste.js/ instead. It will let you control what gets pasted into a textarea or contenteditable.
Works on IE 8 - 10
Creating custom code to enable the Paste command requires several steps.
Set the event object returnValue to false in the onbeforepaste event to enable the Paste shortcut menu item.
Cancel the default behavior of the client by setting the event object returnValue to false in the onpaste event handler. This applies only to objects, such as the text box, that have a default behavior defined for them.
Specify a data format in which to paste the selection through the getData method of the clipboardData object.
invoke the method in the onpaste event to execute custom paste code.
To invoke this event, do one of the following:
Right-click to display the shortcut menu and select Paste.
Or press CTRL+V.
Examples
<HEAD>
<SCRIPT>
var sNewString = "new content associated with this object";
var sSave = "";
// Selects the text that is to be cut.
function fnLoad() {
var r = document.body.createTextRange();
r.findText(oSource.innerText);
r.select();
}
// Stores the text of the SPAN in a variable that is set
// to an empty string in the variable declaration above.
function fnBeforeCut() {
sSave = oSource.innerText;
event.returnValue = false;
}
// Associates the variable sNewString with the text being cut.
function fnCut() {
window.clipboardData.setData("Text", sNewString);
}
function fnBeforePaste() {
event.returnValue = false;
}
// The second parameter set in getData causes sNewString
// to be pasted into the text input. Passing no second
// parameter causes the SPAN text to be pasted instead.
function fnPaste() {
event.returnValue = false;
oTarget.value = window.clipboardData.getData("Text", sNewString);
}
</SCRIPT>
</HEAD>
<BODY onload="fnLoad()">
<SPAN ID="oSource"
onbeforecut="fnBeforeCut()"
oncut="fnCut()">Cut this Text</SPAN>
<INPUT ID="oTarget" TYPE="text" VALUE="Paste the Text Here"
onbeforepaste="fnBeforePaste()"
onpaste="fnPaste()">
</BODY>
Full doc: http://msdn.microsoft.com/en-us/library/ie/ms536955(v=vs.85).aspx
I like the suggestion for the right click
$("#message").on('keyup contextmenu input', function(event) {
alert("ok");
});
finded here:
Source:
Fire event with right mouse click and Paste
Following may help you
function submitenter(myfield,e)
{
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
else return true;
if (keycode == //event code of ctrl-v)
{
//some code here
}
}
<teaxtarea name="area[name]" onKeyPress=>"return submitenter(this,event);"></textarea>
The input event fires when the value of an , , or element has been changed.
const element = document.getElementById("input_element_id");
element.addEventListener('input', e => {
// insertText or insertFromPaste
if(inputType === "insertFromPaste"){
console.log("This text is copied");
}
if(inputType === "insertText"){
console.log("This text is typed");
}
})
You could either use html5 oninput attribute or jquery input event
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$("body").on('input','#myinp',function(){
$("span").css("display", "inline").fadeOut(2000);
});
</script>
<style>
span {
display: none;
}
</style>
</head>
<body>
<input id="myinp" type="search" onclick="this.select()" autocomplete="off" placeholder="paste here">
<span>Nice to meet you!</span>
</body>
</html>