Fancy custom input field

Question

I need to customize input text similar to how StackOverflow's tag editor works with minor differences. Basically I want the input to act as a normal text input field, until user encloses a word inside let's say curly brackets. Then that should become a "different element", with different styling and behavior. Let's say I want to be able to click on it and that would open some popup dialog etc., and the rest of the text would stay normal.

How difficult would be to create something like that? e.g:

See? You'd be typing "Lorem ipsum {dolor", and as soon you close the curly "{dolor}" gets that orange background, becomes clickable, etc. (in this example both "dolor" and "amet" typed inside curly brackets)

Very similar to how tag editor on SO works. Except SO keeps tags always floated to the left and I don't want float

Have you ever seen similar to that, can you share examples? or ideas?

Answer 1

Just add input text to some p, div or span tag when user types something. Replace any { with <span> (or any other marker element) and } with </span>. Add click event to this marker.

$(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>