Focus doesn't work on textarea triggered by javascript onclick event
Question
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();
}
2 answers
solution1
2 2015-06-28 09:46:12
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();
}
solution2
1 ACCPTED 2015-06-28 09:39:28
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.