JavaScript/jQuery - replace text in input text

Question

Let's say we have an input field: <input type="text" id="id0"/>. I would like to dynamically replace the current selection of the text with my text. What is the best way to achieve that using jQuery or javascript?

Update:

I meant: the user types the text and selects part of it, then presses a button to replace the selected section with another specified text.

Regards, Rafal

so, you need to select some text and find out what that is - replace it with some other text... in an input box? — Barrie Reader
– Barrie Reader, Commented Feb 14, 2012 at 11:55
when and to what text you want to replace? any event needs to be triggered ?? it would be helpful if i get you html and js code — run
– run, Commented Feb 14, 2012 at 11:56
Are you replacing on a button press or something? How will it know when to do the replace? — Declan Cook
– Declan Cook, Commented Feb 14, 2012 at 12:00

Tim Down · Accepted Answer · 2015-04-29 16:51:57Z

1

Most browsers support selectionStart and selectionEnd properties on text inputs and textareas. However, IE < 9 does not. You could use my Rangy inputs plug-in for this, which normalizes the mess of IE < 9's lack of support and provides convenient methods for dealing with selections in text inputs and textareas. Using it, the code would be:

$("#id0").replaceSelectedText("SOME NEW TEXT");

If the text box does not have the focus, you'll need to focus it first:

$("#id0").focus();

edited Apr 29, 2015 at 16:51

answered Feb 14, 2012 at 11:58

Tim Down

326k76 gold badges461 silver badges546 bronze badges

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

5 Comments

flu Over a year ago

That plugin uses document.execCommand('insertText') to replace the content (which is nice, as it correctly supports the browsers undo mechanic) but that doesn't work in IE11.

Tim Down Over a year ago

@flu: Yes, I know. There's a fallback for IE. However, it does mean the undo stack is broken in IE.

flu Over a year ago

You're right. I'm just about to open a ticket for that undo bug.

Tim Down Over a year ago

@flu In the IE bug tracker or the plugin?

flu Over a year ago

In the IE bug tracker. Currently when an input got a value Previous and you programatically set to New (via .value or jQuery.val()) and then hit CTRL+Z or choose undo from the context menu, the value will be changed to NewPrevious.

Mike Thomsen · Accepted Answer · 2012-02-14 11:54:49Z

1

$('#id0').val('somenewtexthere');

answered Feb 14, 2012 at 11:54

Mike Thomsen

37.7k11 gold badges64 silver badges86 bronze badges

1 Comment

rafalry Over a year ago

Mike, I would like to dynamically replace the current selection, not the whole input value.

mas-designs · Accepted Answer · 2012-02-14 11:55:24Z

0

I'm not sure if this helps you but maybe in this way:

  var myMessage="My Text";
  $('#id0').val(myMessage);

answered Feb 14, 2012 at 11:55

mas-designs

7,5311 gold badge33 silver badges56 bronze badges

Comments

Alexander · Accepted Answer · 2012-02-14 12:01:55Z

0

If you want to clear it when you type and return its text when going away use this

$('#id0').focus(function() { $(this).val(''); });

$('#id0').blur(function() {$(this).val('  Your text    '); });

answered Feb 14, 2012 at 12:01

Alexander

1712 silver badges10 bronze badges

Comments

DiAngelo · Accepted Answer · 2012-02-14 11:55:42Z

-3

jQuery("input#id0").attr("value","my text");

answered Feb 14, 2012 at 11:55

DiAngelo

2201 silver badge5 bronze badges

4 Comments

mas-designs Over a year ago

-1 because of using jQuery instead of shorthand + using .attr() because there is a function that provides more functionality .val() would be the proper way.

DiAngelo Over a year ago

There are some frameworks where you have to use jQuery instead of $ and I used another version (attr) because there was somebody else that gave an answer with val. My response was right and rises no error. I think you were mean by giving me -1, I was trying to help here.

Florian Margaine Over a year ago

Using .attr() is not good for this. See here why : stackoverflow.com/a/3843317/851498 . This would cause, for example, some form values to be not changed when submitted (attr() changes some jQuery property, while val() changes the DOM element value). I don't care about the jQuery :).

mas-designs Over a year ago

yeah in some projects but here we are giving answers that are up to date and which are not using any functions or habits that are either bad practice or deprecated. so the -1 was right to give.

Collectives™ on Stack Overflow

JavaScript/jQuery - replace text in input text

5 Answers 5

5 Comments

1 Comment

Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

1 Comment

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related