将空格和文本的不同CSS添加到文本类型输入中

时间:2017-03-11 17:41:58

标签: javascript html css

我在html表单中输入text类型如下:

<input type="text" id="tag" name="tag">

现在,我想根据用户的输入在输入文本上添加样式。 textspace的格式必须不同。

例如:如果某人在输入字段中输入了php java python,那么我想要将具有特定背景的phpjavapython设置为internal spaces会有不同的背景。

有可能吗?如果可能的话怎么样?

2 个答案:

答案 0 :(得分:2)

答案是是,没有。 是的,这是可能的,但仅使用输入是不可能的。

你不能把元素放在输入标签里面,但是你可以有一些容器可以为你处理这部分。

我附上了非常简单和天真的例子,它可以做得更好,但它向你展示了这个概念。

输入内的文本按空格分割,并创建每个单词和空格的新元素。

您可以执行类似的操作,但在容器内使用样式输入。那你应该听取输入变化。当用户按下空格时,你应该得到用户写的单词,为单词创建新元素(还有一个用于空格),将其附加到容器,并清除输入,这样它就可以用于下一个新单词。< / p>

&#13;
&#13;
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;
&#13;
&#13;

答案 1 :(得分:2)

您无法直接为输入内的文字提供样式。

我认为你要找的是一个通常命名为&#34;标签输入&#34;的UI元素。或&#34;芯片输入&#34;或者&#34;丸输入&#34;

您可以使用一些javascript或更好的(&#34;更好&#34;作为个人欣赏,请参阅下面的评论)一个js库来输入像这样的标签/药片

https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/(请参阅标题分类标记,每个标记使用不同的颜色)

你可以使用我给你的名字谷歌给其他人。