花哨的自定义输入字段

Question

我需要自定义输入文本，类似于 StackOverflow 的标签编辑器的工作方式，但存在细微差别。基本上我希望输入充当普通的文本输入字段，直到用户将一个单词括在大括号内。那么这应该成为一个“不同的元素”，具有不同的样式和行为。假设我希望能够单击它并打开一些弹出对话框等，其余文本将保持正常。

创造这样的东西有多难？例如：

看到了吗？您将输入“Lorem ipsum {dolor”，一旦您关闭卷曲的“{dolor}”，就会获得橙色背景，变得可点击等（在本例中，“dolor”和“amet”都输入大括号内)

与 SO 上的标签编辑器的工作方式非常相似。除了 SO 保持标签总是向左浮动，我不想浮动

你有没有见过类似的，你能分享例子吗？还是想法？

Answer 1

当用户键入内容时，只需将输入文本添加到一些 p、div 或 span 标记。将任何{ 替换为<span>（或任何其他标记元素），将} 替换为</span>。向此标记添加点击事件。

$(document).on("click paste change input", "input", function() {
  $("#display").html(
    $(this).val().replace("{", "<span>").replace("}", "</span>")
  );
});

$(document).on("click", "#display", function(){
  $("input").focus();
});

$(document).on("click", "#display span", function(e) {
  e.preventDefault();
  alert($(this).text());
})

#display span {
  background-color: yellow;
  cursor: pointer;
}

input {
  opacity: 0.1;
  position: relative;
  z-index: 5;
  top: 50px;
}

#display {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  background-color: #ddd;
  height: 20px;
  width: 100%;
  line-height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='text' value='Click to {start} typing' />
<div id='display'>Click to <span>start</span> typing</div>