HTML，纯Javascript --如何使元素跟随新输入的文本
HTML，纯Javascript --如何使元素跟随新输入的文本
提问于 2022-05-01 01:16:06
我试图创造一种效果，在其中一个圆圈跟随新输入的文本。
就像:当我键入'H‘时，圆圈在它后面，然后当我按'e’时，现在可见的文本是'He‘，但圆圈现在在'e’后面。这一过程还在继续。
文本将被输入到一个<textarea>中，这个文本覆盖了页面的一半。
这是一个网站，如果可能的话，请给出答案与HTML，CSS和香草JS，因为我还没有学习JQuery或任何其他框架，图书馆等。
回答 1
Stack Overflow用户
发布于 2022-05-01 01:57:48
在textarea元素中，我认为没有进一步的讨论是不可能的。但是您可以使用一个输入元素代替。我已经建立了一个小的原型，告诉你如何做到这一点。
const op = document.querySelector('.output');
function make() {
const ta = document.querySelector('#textarea input');
op.innerHTML = ta.value;
const nw = ta.value.length < 1 ? 1: ta.value.length;
ta.size= parseInt(nw);
}.w {
text-align: center;
}
.output {
background: lightgray;
font-size: 10px;
border-radius: 25px;
padding:5px;
margin-bottom: auto;
}
#textarea{
border:1px solid #eee;
display: flex;
gap: 10px;
}
#textarea input{
border:none;
background:none;
font-size:1.2em;
padding:6px;
}
#textarea input:focus{
outline:none;
} <div id="textarea" oninput="make()">
<input size="1" type="text" value=""/>
<div class="output"></div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72075445
复制相关文章
![html怎么使表格居中,html怎么使表格居中[通俗易懂]](https://ask.qcloudimg.com/http-save/yehe-8223537/5eae1919034195b065447dba60441553.png)
浅谈JavaScript如何操作html DOMJavaScript 能够改变页面中的所有 HTML 元素改变 HTML 样式** JavaScript 有能力对 HTML 事件做出反应**添加和删除
相似问题
JavaScript:使html文本成为纯文本
如何使用JavaScript获取没有HTML元素的纯文本？
如何使用纯Javascript使HTML元素可调整大小？
Javascript > HTML吐出纯文本
如何使用纯javascript选择<html>元素？
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
