I have the following code.
<!DOCTYPE html>
<html>
<head>
<title>Focus issue</title>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var text = document.getElementById('text')
window.onload = function() {
text.focus()
}
window.onhashchange = function() {
text.focus()
}
}//]]>
</script>
</head>
<body>
<textarea id="text"></textarea>
<p>Click to focus</p>
</body>
</html>
Here is a JSFiddle demo of the above code: http://jsfiddle.net/DvU63/
Why doesn't the focus go on the textarea box when the page loads? On clicking the link, the focus does go on the textarea box, but I also want the focus to go to the textarea box on page load. Why doesn't it happen?
Note: I am aware of the HTML5 autofocus attribute for textarea. But this question is about why the above JavaScript code does not do what I intend to do.
You're doing the .focus() statement from inside an onload handler that is itself defined inside an onload handler. This inner onload will not be called because by the time you define it the onload event will have occurred. Try this:
window.onload=function(){
var text = document.getElementById('text')
text.focus()
window.onhashchange = function() {
text.focus()
}
}
Your demo, updated: http://jsfiddle.net/DvU63/2/
do this
<script type='text/javascript'>
window.onload=function(){
var text = document.getElementById('text')
text.focus();
window.onhashchange = function() {
text.focus();
}
}
</script>
fiddle
Related
I'm using this for the preview of a saved HTML code (also live)
But for the 1st time I have to click and enter to view the preview
How can I see preview once the browser window opens?
Code:
function showHTML () {
textarea1 = document.getElementById('htmltxt');
viewHtml = document.getElementById('htmlpreview');
viewHtml.innerHTML = textarea1.value ;
}
As far as I have understood the requirement is to call showHTML() on page load..
<body onload="showHTML()">
<textarea id="htmltxt">
aksjdhkasjdhakjds
</textarea>
<span id="htmlpreview"></span>
<script>
function showHTML() {
textarea1 = document.getElementById('htmltxt');
viewHtml = document.getElementById('htmlpreview');
viewHtml.innerHTML = textarea1.value;
}
</script>
</body>
Simply call your function when the document loads, as well as in your click handler:
function showHTML() {
textarea1 = document.getElementById('htmltxt');
viewHtml = document.getElementById('htmlpreview');
viewHtml.innerHTML = textarea1.value;
}
document.addEventListener('DOMContentLoaded', showHTML)
Note that instead of attaching a DOMContentLoaded listener, you could just call showHTML() somewhere inside a <script> tag that sits after both your #htmltxt textarea and your #htmlpreview element (so that they will have been parsed before execution begins).
I have a link in www.abc.com , clicking on which it opens up a popup from www.def.com .
There is a form in that popup from www.def.com. After clicking upon the "Save" button on the form I want the current window to be closed
and the parent will should redirect to a location.
Before this change when I was showing the form from www.abc.com, the below code was working fine .
<script language="JavaScript">
parent.window.close();
parent.opener.parent.window[1].location.replace('/abc.jsp?custid=12345');
</script>
But now "parent.opener" is returning null. So I am able to close the popup but not able to redirect the parent window to
disired location.
I know what I am asking is bit wired, But this the requirement.
At "abc.moc"
<!DOCTYPE html>
<html>
<head>
<script>
// open `popup`
var popup = window.open("popup.html", "popup", "width=200,height=200");
// handler `message` event from `popup.html`
function receiveMessage(event) {
console.log(event, event.data);
this.location.href = event.data;
}
window.addEventListener("message", receiveMessage, false);
</script>
</head>
<body>
</body>
</html>
at "def.moc"
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<input type="button" value="Save">
</form>
<script>
console.log(window.opener);
var button = document.querySelector("form input[type=button]");
button.onclick = function(e) {
e.preventDefault();
e.stopPropagation();
// do stuff with `form`
// call `.postMessage()` on `window.opener` with
// first parameter URL to redirect `abc.moc`,
// second parameter `location.href` of `abc.moc`
window.opener.postMessage("redirect.html",
window.opener.location.href);
// close `popup`
window.close();
}
</script>
</body>
</html>
plnkr http://plnkr.co/edit/pK4XBJDrqFrE7awvMlZj?p=preview
I have a simple transition thing, where a message says something like "Click here to type" and this is a div which when clicked, hides this div and shows the textarea with a flashing cursor. I have the focus through onload when the page initially loads but I'm after, triggering the focus when wanted.
So I have something like this:
interface
<div id="message" onclick="showPad();"><span class="message">Click to write</span></div>
<form name="entry">
<textarea id="writingpad" name="writingpad" placeholder="write here"></textarea>
</form>
javascript
<script>
function showPad() {
document.getElementById('message').style.display = "none";
document.getElementById('writingpad').style.display = "inline-block";
// this is what I've tried for focus
document.entry.writingpad.focus(); // didn't work
$('#writingpad').live('focus', function() {
// document.entry.input.focus(); possibly redundant
}
$('#writingpad').focus(); // doesn't work
}
</script>
working script
function showPad() {
$('#writingpad').focus();
}
The focusing in your script works, the issue is with the loading.
Instead of using onLoad and live event delegations, you could make sure the script is placed in <head> or <body>.
Also don't need jQuery for this - pure JS:
var message = document.getElementById('message');
var textarea = document.getElementById("writingpad");
function showPad() {
message.style.display = "none";
textarea.style.display = "inline-block";
textarea.focus();
}
Demo
This should work for you.
$(document).ready(function() {
$('#message').click(function() {
$(this).hide();
$('#writingpad').css('display', 'inline-block').focus();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="message"><span class="message">Click to write</span></div>
<form name="entry">
<textarea id="writingpad" name="writingpad" placeholder="write here"></textarea>
</form>
EDIT
The reason why your version is not working is because you have function that you forget to close it.
$('#writingpad').live('focus', function() {
// document.entry.input.focus(); possibly redundant
}
Should be:
$('#writingpad').live('focus', function() {
// document.entry.input.focus(); possibly redundant
});
Check this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function showPad() {
document.getElementById('message').style.display = "none";
document.getElementById('writingpad').style.display = "inline-block";
// this is what I've tried for focus
document.entry.writingpad.focus(); // didn't work
$('#writingpad').live('focus', function() {
// document.entry.input.focus(); possibly redundant
});
$('#writingpad').focus(); // doesn't work
}
</script>
<div id="message" onclick="showPad();">
<span class="message">Click to write</span>
</div>
<form name="entry">
<textarea id="writingpad" name="writingpad" placeholder="write here"></textarea>
</form>
First attempt to javascript.. not sure what I'm doing wrong...
Trying to clear the "Sample Here" when i hover mouse or focus, or click.
And Alert when the button is clicked..
I'd rather advices how I can avoid using functions inside the HTML and use them
under the to separate js/html completely!
<!DOCTYPE html>
<html>
<head>
<title>Java Script Practicing</title>
</style>
<script>
document.onreadystatechange = function ()
{
if (document.readyState == "complete")
{
//Page Loaded
function go()
{
alert("done");
}
function clear()
{
var x = document.getElementById("x").value;
x = "";
}
}
}
</script>
</head>
<body>
<form method="post">
<input onclick="clear();" type="text" id="x" value="Sample here" />
<button onclick="go();">Click !</button>
</form>
</body>
</html>
HTML5 documents don't require you state type for a <script> element if it's javascript, and you want to state which character set your document is going to use. This is pretty much always going to be utf8.
That said, you want to tap into the DOMContentLoaded event:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Java Script Practicing</title>
</head>
<body>
<form method="post">
<input class="userinput" type="text" value="Sample here" />
<button class="gobutton">Click !</button>
</form>
<script>
document.addEventListener("DOMContentLoaded", function() {
var button = document.querySelector("button.gobutton");
button.addEventListener("click", function(evt) {
console.log("button was clicked");
}):
var input = document.querySelector("input.userinput");
input.addEventListener("click", function(evt) {
input.value = "";
}):
});
</script>
</body>
</html>
If you want to call your functions from the html as you are doing, you need them to be in the global scope.
Take the definitions for the functions go() and clear() out of the onreadystatechange function. You can still use that function to call the other two, but they must be defined globally.
Also, you cannot simply change the value of the variable x and have that update the element with id=x on the page. Instead, you can use ELEMENT.setAttribute('value', '') to clear the value.
function go() {
alert("done");
}
function clear() {
var x = document.getElementById("x");
x.setAttribute('value', '');
}
document.onreadystatechange = function () {
if (document.readyState == "complete") {
go();
clear();
}
}
Mike has answered your question. Just explaining why your way didn't work. Your functions (go, clear) have become local to the onreadystatechange's callback function's scope. I.e a closure
so in my html i have this portion:
<body ondblclick="myfunc();">
<div id="id1">dasd</div>
<div id="id2">dasda</div>
</body>
and in javascript the function is :
function myfunc() {
do stuff here...
}
i want to know inside myfunc() on which element of the html body the doubleclick was made, because i don't want to triger myfunc() on every doubleclicked element
so how can i detect the id of the element doubleclicked?
<body ondblclick="myfunc(event);">
function myfunc(e) {
// e.target -> element that was clicked
}
make your HTML as
<body ondblclick="myfunc(event);">
and make myfunc as:
function myfunc(event) {
alert(event.target.id); //here you can get element id that is double clicked
event.stopPropagation();
}
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>ondblclick event example</title>
<script>
function initElement() {
var body = document.getElementById("bdy");
body.ondblclick = showAlert;
}
function showAlert(e){
alert(e.target.id);
}
window.onload = initElement;
</script>
</head>
<body id="bdy">
<div id="id1">dasd</div>
<div id="id2">dasda</div>
</body>
</html>
you can define different events with use of on or bind suppose..
$("#id").on("doubleClick",function () {} );
so it will know that its double click event..
or for javascript you can use like this
<body ondblclick="myfunc(event);">
function myfunc(event) {
do something..
}