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

Question

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 be accomplished in javascript ?

Thanks in advance.

schlingel · Accepted Answer · 2011-06-11 09:13:55Z

1

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.

edited Jun 11, 2011 at 9:13

answered Jun 10, 2011 at 8:24

schlingel

8,5757 gold badges36 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zoliqa Over a year ago

Do you mean to add those spans to the textbox ?

Zoliqa Over a year ago

Thank you @schlingel that did the work, I used something similar to your code.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related