Javascript 显示字符数'；内部'；HTML文本区域元素

我希望在HTML文本区域内嵌套一个char count值，如下图所示。我还是一个Js新手，所以任何建议都是非常受欢迎的。我做了一些挖掘工作，但没有发现任何真正能帮助我的东西

因为我不能直接访问CSS或HTML文件，所以我必须通过Js将这些元素作为目标。我的问题是，下面的图片可以完全用Js完成吗？如果是，我从哪里开始

元素ID是

='desinp'

我将包括我目前的情况，我在这一点上的时间

---

我添加了一段Javascript代码，它将计算剩余的字符，如果您想显示键入的字符总数，可以将字符相加，您可以根据需要设计元素。其余的代码都来自于你的小提琴

//字符限制。
函数最大长度（el）{
如果（！（'maxLength'以el表示））{
var max=el.attributes.maxLength.value；
el.onkeypress=函数（）{
如果（this.value.length>=max）返回false；
};
}
}
maxLength（document.getElementById（“desinp”）；
document.getElementById（'desinp'）。onkeyup=function（）{
document.getElementById（'count'）.innerHTML=“Characters left:”+（150-this.value.length）；
};
//元素风格超车。
document.getElementById（“desinp”）.style.color=“#ccc”；
document.getElementById（“desinp”）.style.resize=“无”；
document.getElementById（“desinp”）.style.height=“auto”；
document.getElementById（“desinp”）.rows=“3”
我添加了一段Javascript代码，它将计算剩余的字符，如果您想显示键入的总字符数，可以将字符相加，您可以根据需要设计元素。其余的代码都来自于你的小提琴


//字符限制。
函数最大长度（el）{
如果（！（'maxLength'以el表示））{
var max=el.attributes.maxLength.value；
el.onkeypress=函数（）{
如果（this.value.length>=max）返回false；
};
}
}
maxLength（document.getElementById（“desinp”）；
document.getElementById（'desinp'）。onkeyup=function（）{
document.getElementById（'count'）.innerHTML=“Characters left:”+（150-this.value.length）；
};
//元素风格超车。
document.getElementById（“desinp”）.style.color=“#ccc”；
document.getElementById（“desinp”）.style.resize=“无”；
document.getElementById（“desinp”）.style.height=“auto”；
document.getElementById（“desinp”）.rows=“3”
要在JavaScript中完全做到这一点，您必须动态更改HTML，在正确的位置插入适当的元素，然后添加事件处理程序等


var wrapper=document.createElement（'div'）；
var text=document.getElementById（“desinp”）；
var c_wrap=document.createElement（'div'）；
var count=document.createElement（'span'）；
wrapper.style.position='relative'；
c_wrap.style.position='绝对'；
c_wrap.style.bottom='8px'；
c#u wrap.style.color='#ccc'；
c_wrap.innerHTML='Char:'；
text.parentNode.appendChild（包装器）；
appendChild（文本）；
c_包装附件子项（计数）；
appendChild（c_wrap）；
text.style.color=“#ccc”；
text.style.resize=“无”；
text.style.height=“自动”；
text.rows=“3”；
函数_集（）{
c_wrap.style.left=（text.clientWidth-c_wrap.clientWidth-12）+“px”；
count.innerHTML=this.value.length | | 0；
}
text.addEventListener（'input'，_set）；
_set.call（文本）
要在JavaScript中完全做到这一点，您必须动态更改HTML，在正确的位置插入适当的元素，然后添加事件处理程序等


var wrapper=document.createElement（'div'）；
var text=document.getElementById（“desinp”）；
var c_wrap=document.createElement（'div'）；
var count=document.createElement（'span'）；
wrapper.style.position='relative'；
c_wrap.style.position='绝对'；
c_wrap.style.bottom='8px'；
c#u wrap.style.color='#ccc'；
c_wrap.innerHTML='Char:'；
text.parentNode.appendChild（包装器）；
appendChild（文本）；
c_包装附件子项（计数）；
appendChild（c_wrap）；
text.style.color=“#ccc”；
text.style.resize=“无”；
text.style.height=“自动”；
text.rows=“3”；
函数_集（）{
c_wrap.style.left=（text.clientWidth-c_wrap.clientWidth-12）+“px”；
count.innerHTML=this.value.length | | 0；
}
text.addEventListener（'input'，_set）；
_set.call（文本）

没有jQuery？没有CSS？硬汉。但这是可能的。遗憾的是，不，我只能用Js（//但一定要说。我很想学。：）没有jQuery？没有CSS？硬汉。但这是可能的。遗憾的是，不，我只能用Js（//但是一定要说。我很想学。：）你也可以用脚本设置样式，这样它看起来会是“内部”文本
textarea
@MoshFeu是的，但是让op所有者做些事情，至少cSS；）这就是问题所在，任何由Js新呈现的HTML元素都不会显示在页面上。我必须服从或超越，原来的CSS样式。我宁愿遵循原始样式，因为如果我覆盖它；它可能会弄乱其他地方的页面。您也可以使用脚本设置样式，使其看起来像“内部”文本
textarea
@MoshFeu是的，但让op所有者做点什么，至少cSS；）这就是问题所在，任何由Js新呈现的HTML元素都不会显示在页面上。我必须服从或超越，原来的CSS样式。我宁愿遵循原始样式，因为如果我覆盖它；它可能会弄乱其他地方的页面。非常直观，它比我自己能够实现的要近得多。然而，我在这方面仍然有困难。因为正在生成新元素。@Null-我想您必须自己改进和调整它，使其完全适合，但这至少是您针对元素、附加元素、添加事件处理程序等的方式。很好！！我一直在尝试将字符数附加到文本区域，然后使用position:relative等移动它，但这要好多了！我会的