[英]Focus doesn't work on textarea triggered by javascript onclick event
我有一個簡單的過渡事物,其中一條消息說“點擊這里鍵入”這個,這是一個div,當點擊時,隱藏這個div並顯示帶有閃爍光標的textarea。 當頁面最初加載時,我通過onload集中注意力但是我想要在需要時觸發焦點。
所以我有這樣的事情:
接口
<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>
工作腳本
function showPad() {
$('#writingpad').focus();
}
你的腳本中的焦點工作,問題是加載。
您可以確保將腳本放在<head>
或<body>
,而不是使用onLoad
和實時事件委派。
也不需要jQuery - 純JS:
var message = document.getElementById('message');
var textarea = document.getElementById("writingpad");
function showPad() {
message.style.display = "none";
textarea.style.display = "inline-block";
textarea.focus();
}
這應該適合你。
$(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>
編輯
您的版本無法正常工作的原因是因為您具有忘記關閉它的功能。
$('#writingpad').live('focus', function() {
// document.entry.input.focus(); possibly redundant
}
應該:
$('#writingpad').live('focus', function() {
// document.entry.input.focus(); possibly redundant
});
檢查一下 :
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.