我在html表单中输入text
类型如下:
<input type="text" id="tag" name="tag">
现在,我想根据用户的输入在输入文本上添加样式。 text
和space
的格式必须不同。
例如:如果某人在输入字段中输入了php java python
,那么我想要将具有特定背景的php
,java
和python
设置为internal spaces
会有不同的背景。
有可能吗?如果可能的话怎么样?
答案 0 :(得分:2)
答案是是,没有。 是的,这是可能的,但仅使用输入是不可能的。
你不能把元素放在输入标签里面,但是你可以有一些容器可以为你处理这部分。
我附上了非常简单和天真的例子,它可以做得更好,但它向你展示了这个概念。
输入内的文本按空格分割,并创建每个单词和空格的新元素。
您可以执行类似的操作,但在容器内使用样式输入。那你应该听取输入变化。当用户按下空格时,你应该得到用户写的单词,为单词创建新元素(还有一个用于空格),将其附加到容器,并清除输入,这样它就可以用于下一个新单词。< / p>
const textContainer = document.querySelector('#textContainer')
document.querySelector('#myInput').addEventListener('input', ({ target }) => textToElements(target.value))
const textToElements = (text) => {
const words = text.split(' ')
const wordsElements = words.map(createWordElement)
clearWordsContainer()
wordsElements.forEach(putWordElement)
}
const createWordElement = (word) => {
const element = document.createElement('span')
element.classList.add('word')
element.textContent = word
return element
}
const putWordElement = (element) => {
const spaceElement = document.createElement('span')
spaceElement.classList.add('space')
spaceElement.textContent = ' '
textContainer.appendChild(element)
textContainer.appendChild(spaceElement)
}
const clearWordsContainer = () => textContainer.innerHTML = ''
&#13;
.word {
color: #FFF;
background: #333;
}
.space {
background: #999;
}
&#13;
<div class="container">
<div id="textContainer"></div>
<input id="myInput" type="text" />
</div>
&#13;
答案 1 :(得分:2)
您无法直接为输入内的文字提供样式。
我认为你要找的是一个通常命名为&#34;标签输入&#34;的UI元素。或&#34;芯片输入&#34;或者&#34;丸输入&#34;
您可以使用一些javascript或更好的(&#34;更好&#34;作为个人欣赏,请参阅下面的评论)一个js库来输入像这样的标签/药片
https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/(请参阅标题分类标记,每个标记使用不同的颜色)
你可以使用我给你的名字谷歌给其他人。