HTML，纯Javascript --如何使元素跟随新输入的文本
HTML，纯Javascript --如何使元素跟随新输入的文本
提问于 2022-05-01 09:16:06
我试图创造一种效果，在其中一个圆圈跟随新输入的文本。
就像:当我键入'H‘时，圆圈在它后面，然后当我按'e’时，现在可见的文本是'He‘，但圆圈现在在'e’后面。这一过程还在继续。
文本将被输入到一个<textarea>中，这个文本覆盖了页面的一半。
这是一个网站，如果可能的话，请给出答案与HTML，CSS和香草JS，因为我还没有学习JQuery或任何其他框架，图书馆等。
回答 1
Stack Overflow用户
发布于 2022-05-01 09: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
复制相关文章
相似问题
腾讯云开发者
