焦点不适用于由 javascript onclick 事件触发的文本区域答案

【问题标题】：Focus doesn't work on textarea triggered by javascript onclick event焦点不适用于由 javascript onclick 事件触发的文本区域
【发布时间】：2015-06-28 18:30:03
【问题描述】：

我有一个简单的转换，其中一条消息说“单击此处输入”之类的内容，这是一个 div，单击该 div 时会隐藏此 div 并显示带有闪烁光标的文本区域。当页面最初加载时，我通过 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();
}

【问题讨论】：

标签： javascript jquery

【解决方案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();
}

Demo

【讨论】：

@janicehoplin 欢迎！如果你可以排除 jQuery，你应该。 :-)
你为什么这么说？ jQuery不可靠还是容易出风险？
其实我写的很烂，我是说之前用过onload，这里没用过。
@janicehoplin jQuery 很棒，但就臃肿而言它可能有点过头了。这取决于您的要求，但无论您是否使用 vanilla JS 寻求解决方案，您都可以了解 jQuery 的工作原理，这在许多方面都是有益的...... :-) 看看这个：youmightnotneedjquery.com

【解决方案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>

【讨论】：

如果根据您的帖子我的版本不能正常工作，这意味着什么？单击触发的同一功能内的其他效果正在起作用，但焦点不起作用。我看到你的演示有效。并感谢您的回答。
没关系，它的工作原理，谢谢你，我喜欢速记
不客气@janicehoplin。 :) 似乎 showPad() 函数是在您的 html 之后加载的，所以 onclick="showPad()" 找不到该函数，因为它尚未加载。
实际上它正在工作，几乎是我拥有的，我会发布我的案例的工作脚本，我不知道为什么......？