如何更改输入文本的每个字符的样式答案

【问题标题】：How to change style of each character of input text如何更改输入文本的每个字符的样式
【发布时间】：2017-09-03 20:42:51
【问题描述】：

这里我想随机改变文本每个字符的CSS。就像我输入 Stack 一样，我会在输入字段的底部得到红色的 S、蓝色的 t、绿色的 a……等等。

var myModel = {
	name: "Mayur",
};

var myViewModel = new Vue({
	el: '#my_view',
	data: myModel
});

span{
color:green;
font-weight:600;
font-size:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>

<div id="my_view">
  <label for="name">Enter name:</label>
  <input type="text" v-model="name" id="name" name="name" />
  <p>Welcome, <span>{{ name | uppercase }}</span></p>
</div>

【问题讨论】：

jsfiddle.net/deepaksingh/vjvMp/1403 看看有没有帮助！

标签： javascript html css vue.js

【解决方案1】：

我没有使用过 Vue，我不熟悉它的内部事件和流程，但这是我用简单的JavaScript 制作的一个小原型：

document.querySelector('button').onclick = function (){
    let span = document.querySelector('span.letters'),
        text = span.textContent;
    span.innerHTML = '';
    Array.from(text).map(function(l){
        let color = document.createElement('span');
        color.innerHTML = l;
        color.style.color = 'rgb(' +
            randInterval(0, 255) + ',' +
            randInterval(0, 255) + ',' +
            randInterval(0, 255) + ')';
        span.appendChild(color);
    });
}

function randInterval(min,max)
{
    return Math.floor(Math.random()*(max-min+1)+min);
}

<div><span class="letters">STACK</span></div>

<button>Random colors</button>

我特意将随机化rgb() 的每个值的函数放在一个函数中，这样您就可以轻松更改它（现在颜色是真正随机的）。如果要使颜色更深，则需要降低max 的值。如果你想要颜色更浅，你需要增加mins。

【讨论】：

【解决方案2】：

HTML：

<div>Type something here, then click on the white space beneave.</div>
<input type="hidden" id="hidden">

Javascript：

$("div").prop("contentEditable", true).blur(function(){
    var chars = $(this).text().split("");
    $("#hidden").val($(this).text());
    this.innerHTML = "";
    $.each(chars, function(){
        $("<span>").text(this).css({
            color: "#"+(Math.random()*16777215|0).toString(16)
        }).appendTo("div");
    });
});

CSS：

div{
    border: 1px solid black;
    width: 400px;
    height: 20px;
    padding: 2px 3px;
    overflow: hidden;
}

您可以访问http://jsfiddle.net/DerekL/Y8ySy/进行实施！

链接中给出了 html 和 css 代码。它为角色随机赋予颜色，但可以轻松操作，或者如果您希望它们随机运行，您可以直接使用它。

【讨论】：