javascript - Fancy custom input field -

javascript - Fancy custom input field -

i need customize input text similar how stackoverflow's tag editor works minor differences. want input deed normal text input field, until user encloses word within let's curly brackets. should become "different element", different styling , behavior. let's want able click on , open popup dialog etc., , rest of text remain normal.

how hard create that? e.g:

see? you'd typing "lorem ipsum {dolor", , close curly "{dolor}" gets orange background, becomes clickable, etc. (in illustration both "dolor" , "amet" typed within curly brackets)

very similar how tag editor on works. except keeps tags floated left , don't want float

have ever seen similar that, can share examples? or ideas?

just add together input text p, div or span tag when user types something. replace { <span> (or other marker element) , } </span>. add together click event marker.

class="snippet-code-js lang-js prettyprint-override">$(document).on("click paste alter 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()); }) class="snippet-code-css lang-css prettyprint-override">#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; } class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type='text' value='click {start} typing' /> <div id='display'>click <span>start</span> typing</div>

javascript html css