焦点不适用于由javascript onclick事件触发的textarea

Question

我有一个简单的过渡事物，其中一条消息说“点击这里键入”这个，这是一个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();
}

Answer 1

你的脚本中的焦点工作，问题是加载。

您可以确保将脚本放在<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();
}

演示

Answer 2

这应该适合你。

 $(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>

焦点不适用于由javascript onclick事件触发的textarea

问题描述

2 个解决方案

解决方案1
2 2015-06-28 09:46:12

解决方案2
1 已采纳 2015-06-28 09:39:28

焦点不适用于由javascript onclick事件触发的textarea

问题描述

2 个解决方案

解决方案1 2 2015-06-28 09:46:12

解决方案2 1 已采纳 2015-06-28 09:39:28

解决方案1
2 2015-06-28 09:46:12

解决方案2
1 已采纳 2015-06-28 09:39:28