如何使用纯 JavaScript 在文本区域标签中定位占位符值

How does one target a placeholder value in a textarea tag using pure javascript

本文关键字：标签 定位 占位符 区域 文本 何使用 JavaScript      更新时间：2023-09-26

我目前有一个名为comp的div

<div id="comp"></div>

使用 Javascript，我添加了一个带有占位符值的文本区域标签

var comp = document.getElementById('comp');
setTimeout(function(){
        comp.innerHTML = '<textarea placeholder="Write on me now, or else... you will have to watch me write on"></textarea>';
    }, 1500);

请记住，逐字写出整个文本大约需要 1.5 秒。

如何使用 setInterval 每 200 毫秒将单词"和"附加到文本区域中的占位符值，以便每 .2 秒"和"不断写入，直到用户写入某些内容。

请随时查看此JSFiddle以澄清。（美学有点混乱，但它完成了工作）。谢谢，我真的很感激！

另外，我试图找到类似的问题，但我找不到任何问题。如果有人能引导我走向他们，那将非常有帮助。

虽然我不太明白你想要什么，但我认为你想要的就是：

var textarea = document.getElementById('test');
setInterval(function () {
    textarea.placeholder += ' and on';
}, 1500);
<div id="comp"><textarea id='test' placeholder="Write on me now, or else... you will have to watch me write on"></textarea></div>

每隔 1.5 秒，and on 将添加到文本区域的占位符中，ID 为 test

您可以使用

getElementsByTagName 获取对文本区域的引用，然后开始向占位符添加文本的间隔。当用户开始键入时，您可能希望停止间隔：

setTimeout(function(){
  var comp = document.getElementById('comp');
  comp.innerHTML = '<textarea placeholder="Write on me now, or else... you will have to watch me write on"></textarea>';
  var tex = comp.getElementsByTagName('textarea')[0];
  var handle = window.setInterval(function(){
    if (tex.value.length == 0) {
      tex.placeholder += ' and on';
    } else {
      window.clearInterval(handle);
    }
  }, 200);
}, 1500);
textarea { width: 90%; height: 200px; }
<div id="comp"></div>

此外，您可能希望添加一个计数器（或仅检查占位符的长度），以便您可以在一定次数后停止间隔。如果您无限期地保持间隔，浏览器最终会崩溃。

相关文章：