I know its really simple, but why doesn't this code alert on key presses?
Tried with both Chrome and Firefox.
<html>
<head></head>
<body style="height: 100%; margin: 0px; padding: 0px;">
<div style="height: 100%;" id="main">sds</div>
<script>
window.onload = function()
{
var m = document.getElementById("main");
m.onkeydown = function(event) { alert("keydown!"); };
m.focus();
};
</script>
</body>
</html>
thanks
You shouldn't catch key presses on an element unless it is an <input> field. Replace main with the body:
var m = document.getElementsByTagName("BODY")[0];
This will catch all key strokes on the page unless there are nested handlers on input fields.
The problem you encounter is because of event bubbling/trickling and input focus. The main is not "focused" upon so it doesn't get any keyboard event fired.
Body, on the contrary, is implicitly "focused" when no text field is focused and no text selection is made.
Related
I got a problem in updating the value within <textarea> tags. The procedure is like this, there is an initial value inside textarea, then the user changes it. If I want to use a js script (implemented by a button) to modify the value further, it does not work at all. However, if we do nothing on the textarea, the button works perfectly. So weird to me. Could anyone shed any light on this? The code is posted below.
$(document).ready(function() {
$("#mybutton").click(function() {
var mystring = "The previous textarea value is <br><em>" + $("#myarea").val() + "</em>";
$("#myarea").html("Star wars"); // this line doesn't work after editting the textarea but works if you do not edit anything, why?
$("#placeholder").html(mystring);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
<div>Input whatever you want</div>
<textarea id="myarea" style="width: 300px; height: 70px">Initial text</textarea>
<div>
<button id="mybutton">Click after editing</button>
<br> The button is supposed to change the text to <em>Star wars</em>.
</div>
<div id="placeholder"></div>
</body>
$(document).ready(function() {
$("#mybutton").click(function() {
var mystring = "The previous textarea value is <br><em>" + $("#myarea").val() + "</em>";
$("#myarea").val("Star wars"); //The changes have to be made on this line
$("#placeholder").html(mystring);
});
});
Inorder to change the value of textarea use val() , instead of html().
When I have focus on the input field and I click in any open area of the body, the body becomes the document.activeElement , Is there a way to prevent the body focus completely.
What I am looking for is :
To prevent focus the body and maintain focus on the input field.
To avoid the firing of the blur event on the input field.
I've tried adding tabindex=-1 but I believe its for Tab functionality and hence does not work in this case.
document.querySelector("#inpdontlosefocus")
.addEventListener("blur",function(){
const $log = document.querySelector("#log");
$log.innerText += "\r\nLost focus";
})
html,body {
width:100vw;
height: 100vh;
}
<body id="notokaytogetfocus">
<input id="inpdontlosefocus" type="" placeholder="dont lose focus to body">
<input id="inpokaytofocus" type="" placeholder="allow focus">
<div id="log"></div>
</body>
Here is a solution that will always keep the focus on input fields in your document:
you will be able to switch the focus between input fields.
if you clicked outside an element that is not input, it will get the lastest input blurred and will apply focus on it.
var blurred, focused;
const $log = document.querySelector("#log");
var els = document.querySelectorAll('input');
Array.prototype.forEach.call(els, function(el) {
el.addEventListener('focus', function() {
focused = this;
});
el.addEventListener('blur', function() {
$log.innerText += "\r\nLost focus;"
blurred = this;
});
});
document.addEventListener("click", function(e) {
e.preventDefault();
if (focused && focused.tagName == "INPUT") {
$log.innerText += "\r\nactiveElement= " + document.activeElement.id;
focused.focus();
} else if (blurred) blurred.focus();
})
html,
label {
width: 100%;
height: 100%;
}
<body id="notokaytogetfocus">
<input id="inpdontloosefocus" placeholder="dont loose focus to body">
<input id="inpokaytofocus" placeholder="allow focus">
<div id="log"></div>
</body>
I'd added more html elements for a more accurate demonstration, the logic here is if the event source in body is not focus-able then we set focus back to the input we want, other wise the its a focusable element thus will get the focus(e.g. button, link, input, ...); notice that click event is attached to body and clicking outside body won't have this behavior.
document.querySelector('.notokaytogetfocus').addEventListener("click",function (e){
if(e.target == document.activeElement){
console.log("focusable element");
}else{
console.log("not focusable element");
// we'll set foucs on desired input
document.querySelector("#inpdontlosefocus").focus()
}
})
.notokaytogetfocus{height: 100vh; width:100vw;}
<div class="notokaytogetfocus">
<input id="inpdontlosefocus" type="" placeholder="dont lose focus to body">
<input id="inpokaytofocus" type="" placeholder="allow focus">
<button>do!(focusable)</button>
<p>lorem ipsum</p>
<div>some text</div>
</div>
I am drag-and-dropping some text from a proprietary application into an HTML <textarea> element. This software cannot copy-paste; drag-and-drop is the only option. However, the drag and drop can be simulated by simply typing a few lines in Word, then dragging them into the browser.
I have a jsfiddle with my code. However, when I drag some lines from the program into the text box the first time, I get "undefined" returned. When I try it again without reloading the page (when the text area already has contents), it works great.
How can I get it to work the first time?
You need to put the line
$('#return').html(dropstr);
inside of the getAsString callback.
var dropstr;
$( document ).ready(function() {
$('#dropbox').on('drop', function(e) {
e.originalEvent.dataTransfer.items[0].getAsString(function(str){
dropstr=str;
console.log(dropstr);
$('#return').html(dropstr);
});
});
});
#return{
border:1px solid black;
width: 200px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropbox" contenteditable="true" id="dropbox">
<textarea></textarea>
</div>
<div id="return">
</div>
You were appending outside of callback which itself is not needed at least in your case. fiddle
<div id="dropbox" contenteditable="true" id="dropbox">
<textarea></textarea>
</div>
<div id="return">
</div>
and here is js.
var dropstr;
$(document).ready(function() {
$('#dropbox').on('drop', function(e) {
var str = e.originalEvent.dataTransfer.getData('Text');
console.log(str);
$('#return').html(str);
});
});
This question already has answers here:
Get clicked element using jQuery on event?
(6 answers)
Closed 5 years ago.
I'm not a big fan of putting my event listeners (specifically onclick in this case) in the HTML, mostly because I can't use
$(document).ready(function(){})
I would much rather define the buttons' onclick as I've commented it in the startup function. However, this doesn't refer to the clicked button when I put the listener in the script (I'm guessing because it doesn't "know" which button I clicked). I've tried setting event as a parameter to the showImage function, and finding the e.target inside it, but this didn't work either. Is there a way I can refer to the clicked button without having the onclick inside the HTML tag?
//$(document).ready(function() {
window.onload = startup;
function startup() {
$("img").hide();
//$("button").click(showImage(this));
}
function showImage(e) {
var chosen = e.value;
$('#' + chosen).fadeIn(500);
$('img:not(#' + chosen + ')').hide();
}
//});
body {background-color: #EFEFEF;}
#content {width: 80%; margin: auto; background-color: white; padding: 15px; font-family: "Century Gothic",sans-serif;}
img {height: 250px; border: solid 1px black;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<img id="pig" src="http://www.igjerstad.no/sites/default/files/styles/nodeimage/public/field/image/gris-750-5.jpg?itok=TJa-iUVg">
<img id="cow" src="https://www.matmerk.no/cms/images/3675/1200/1200/ku-nyt-norge.jpeg">
<img id="sheep" src="https://media.timeout.com/images/103778879/630/472/image.jpg">
<img id="hen" src="http://africahitz.com/wp-content/uploads/2017/01/hen-white-and-black-color.jpg">
<br>
<button value="pig" onclick="showImage(this)">Gris</button>
<button value="cow" onclick="showImage(this)">Ku</button>
<button value="sheep" onclick="showImage(this)">Sau</button>
<button value="hen" onclick="showImage(this)">Høne</button>
Thanks in advance!
PS. I would guess someone else has had this problem and maybe asked about it here. I did check if I could find a similar question on the site, but found nothing. However, I have failed to find that before, so I'm sorry if this is a duplicate.
PS2. The images in my code are not mine, nor do I have the rights for them. Please don't sue me ':D
PS3(!!). I'm not an experienced programmer, my terminology might be wrong some places. Feel free to correct me :)
Firstly you need to define function() in a click function so it should look like this:
$("button").click(function() {
//code to execute here
});
Instead of this:
$("button").click(//code to execute here);
When calling this in a button it will refer to the button and if I understand your code right, the image is hidden therefore if that is the button then you can't click a hidden image, if you're using a separate button to hide the image then in the click function you need to have e stated as the image element.
To use this you also need to call it as $(this) not just this.
This should work.
//$(document).ready(function() {
window.onload = startup();
function startup() {
console.log("window loaded");
$("img").hide();
$("button").click(function() {showImage(this)});
}
function showImage(e) {
console.log("onside eras");
var chosen = e.value;
$('#' + chosen).fadeIn(500);
$('img:not(#' + chosen + ')').hide();
}
//});
this will be set inside the event handler as event.currentTarget Ref. If you are using jQuery you can make a jQuery object from it by doing $(this). So to get the value you can do:
var chosen = $(this).prop('value');
I have also added a class myclass to the buttons to select it using $('.myclass') so that this can be seperated from other possible buttons in the page. You can also do $('button') instead to select all buttons irrespective of the class.
UPDATE
Just saw your commented out code:
$("button").click(showImage(this)); // When a button is clicked
// call the function returned by showImage(this).. err it doesnt return
// a function so it fails.
you should pass a function reference or simply a function name to the click event registration. like .click(showImage) without any function call (). In your code it will execute showImage(this) and bind the returned value to the event listener, which will apparently fail.
It should actually be:
$("button").click(showImage); // when a button is clicked
// call the function showImage with this=<clicked button> and param=event
and this will be automatically set inside the function as event.currentTarget
$(document).ready(function() {
window.onload = startup;
function startup() {
$("img").hide();
//$("button").click(showImage(this));
}
function showImage(e) {
var chosen = $(this).prop('value');
$('#' + chosen).fadeIn(500);
$('img:not(#' + chosen + ')').hide();
}
$('.myclass').on('click', showImage);
});
body {background-color: #EFEFEF;}
#content {width: 80%; margin: auto; background-color: white; padding: 15px; font-family: "Century Gothic",sans-serif;}
img {height: 250px; border: solid 1px black;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<img id="pig" src="http://www.igjerstad.no/sites/default/files/styles/nodeimage/public/field/image/gris-750-5.jpg?itok=TJa-iUVg">
<img id="cow" src="https://www.matmerk.no/cms/images/3675/1200/1200/ku-nyt-norge.jpeg">
<img id="sheep" src="https://media.timeout.com/images/103778879/630/472/image.jpg">
<img id="hen" src="http://africahitz.com/wp-content/uploads/2017/01/hen-white-and-black-color.jpg">
<br>
<button value="pig" class="myclass">Gris</button>
<button value="cow" class="myclass">Ku</button>
<button value="sheep" class="myclass">Sau</button>
<button value="hen" class="myclass">Høne</button>
I am trying to replace the content of a div with an iframe that allows the user to input a URL to display another page. I will, ideally, add another button next to the Change URL button that links to a specific page.
However, I cannot get this code to work. I can get the div to be replaced with text and some html. But the iframe code won't load when I put this in. I am suspecting it's due to the quotation marks.
I am a bit of a novice at javascript/JQuery so any help with this will be greatly appreciated.
Here is what I have going for the code below.
<style>
#target {
width: 200px;
height: 340px;
}
</style>
<script>
$(function load($){
var $iframe = $('#target'),
$change = $('#change'),
$url = $('#url');
$change.click(function url() {
$iframe.attr('src', $url.val());
});
});
document.getElementById("c_emot").innerHTML = "<iframe id="target" src="/"></iframe><br>
<input id="url" type="text"><br>
<button id="change" type="button">Change URL</button>";
</script>
Your quoted string is all wrong. Try this:
document.getElementById("c_emot").innerHTML = '<iframe id="target" src="/"></iframe><br>
<input id="url" type="text"><br><button id="change" type="button">Change URL</button>';
for reference: http://www.javascripter.net/faq/quotesin.htm
Also, your click event is not being bound to the button after the button is created. You can make it persistent on the button's container like this:
$('#c_emot').on('click', '#change', (function(){
$('#target').attr('src', $('#url').val());
});
And if youre going to mess with the DOM, you have to be sure that the element you want to manipulate has already been created when your code is run:
$(document).ready(function(){
// put all your code here
});
but maybe you should be creating elements instead of dumping markup into the container:
document.onreadystatechange = function () {
if(document.readyState == "complete") {
var container = document.getElementById("c_emot");
var iframe = document.createElement('iframe');
iframe.src = "/";
container.appendChild(iframe);
var input = document.createElement('input');
input.id = "url";
input.type = "text";
container.appendChild(input);
var button = document.createElement('button');
button.id = "change";
button.innerHTML = "Change URL";
button.addEventListener('click', function() {
iframe.src = input.value;
});
container.appendChild(button);
}
}
Not sure if that event listener will work, got to try it and see :)
Have you tried just doing it without messing around with the DOM?...
<iframe name="urlbox"></iframe>
<input type="text" id="urlinput" />
<button onclick="window.open(document.getElementById('urlinput').value, 'urlbox')">Navigate!</button>
Most browsers wont let you navigate the iframe to a different domain for security anyway, so maybe this is all for nothing.
This demo has 2 features:
Using the text input, user can enter a URL to change the src of the iframe.*
This is possible by using this function:
function changeSrc(src) {
var iframe = document.getElementById('site');
site.src = src;
}
*Be aware that not all sites are iframe friendly, so expect some sites that my function will simply not work for.
Notice the links to various sites. Their behavior has been alter--rather than jumping to the site, it opens the site within the iframe.
Each link is a normally constructed anchor element <a> with one exception. It's value for their attribute target is site.
site is the name of the iframe. When an anchor has target="name of iframe"` the anchor opens the site within that targeted iframe.
This must be the iframe's name attribute not the iframe's id.
Snippet
function changeSrc(src) {
var iframe = document.getElementById('site');
site.src = src;
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
}
section {
height: 100%;
width: 100%;
overflow-y: auto;
}
<form id="form" onchange="changeSrc(url.value);">
<fieldset>
<legend>Enter URL</legend>
<input id="url">
<input type="submit" />
</fieldset>
</form>
ROOT Example W3Scools jsFiddle
jsDelvir JavaScript Tut Plain JS
<section>
<iframe id="site" name="site" src="/" width="100%" height="100%" frameborder="0"></iframe>
</section>