花哨的自定义输入字段

Question

我需要自定义输入文本，类似于StackOverflow的标记编辑器如何处理微小差异。基本上我希望输入作为普通的文本输入字段，直到用户将一个单词括在里面，让我们说大括号。那应该成为一个“不同的元素”，具有不同的风格和行为。假设我希望能够点击它，这将打开一些弹出对话框等，其余文本将保持正常。

创造类似的东西有多难？ e.g：

请参阅？你正在输入“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>