How to add buttons to the content of a textbox in javascript

I need some kind of textbox control that can host buttons along the text strings. Basically I want to create a textbox with names that enables the user to remove some names after addition. How can this开发者_如何学C be accomplished in javascript ?

Thanks in advance.

Just add SPANs before the textbox in your element. Format the SPANs as colored boxes with the text and maybe an X for deleting the entry and you're good to go.

Using JQuery this is really easy. Or do you want a Webforms-Control which is able to do that?

Edit:/

The Inline-Element could look like that:

<span id="my-filterbox">
  <input type="text" name="next-filter" />
</span>

And then your JS to add a key-event handler. Im using JQuery in this case:

$('#my-filterbox').keyup(function(event) {
  if(event.keyCode == '13') { // 13 = key code for enter
    var value = $(this).val();
    $(this).val('');
    $('#my-filterbox').prepend('<span class="filter-elem">' + value + '</span>');
  }
});

This way you add the filter to the span my-filterbox everytime the user hits enter. Per CSS you're able to format the span at the left side of the input box.

This code is untested but I think you get the idea.