Stack Overflow
Stack Overflow

How to append text to ' – nwellcome Jul 18 '11 at 14:41

  • No, I don't want like there. I want it in output (after all is submitted and other user look at that post). – daGrevis Jul 18 '11 at 14:49
  • As far as I can think... I could use something similar like Markdown or WYSIWYG. – daGrevis Jul 18 '11 at 14:51
  • 1
    http://jsfiddle.net/roXon/gejA2/ (:-|) – Roko C. Buljan Jul 18 '11 at 14:55
  • @roXon Can't do like that. I need to save the message into the database, then display it and escape special chars (so HTML isn't allowed). – daGrevis Jul 18 '11 at 14:58

    • 5 Answers5

    17

    Try

    var myTextArea = $('#myTextarea');
myTextArea.val(myTextArea.val() + '\nYour appended stuff');
    James McCormack
    • 9,217
    • 3
    • 47
    • 57
    7

    This took me a while, but the following jQuery will do exactly what you want -- it not only appends text, but also keeps the cursor in the exact same spot by storing it and then resetting it:

    var selectionStart = $('#your_textarea')[0].selectionStart;
var selectionEnd = $('#your_textarea')[0].selectionEnd;

$('#your_textarea').val($('#your_textarea').val() + 'The text you want to append');

$('#your_textarea')[0].selectionStart = selectionStart;
$('#your_textarea')[0].selectionEnd = selectionEnd;

    You should probably wrap this in a function though.

    fletom
    • 1,998
    • 13
    • 17
    • Looks awesome! What element did you meant with `#a`? – daGrevis Jul 18 '11 at 15:22
    • @daGrevis Oops! I meant that to say #your_textarea, it was just called #a when I was testing. – fletom Jul 18 '11 at 15:37
    • 1
      `selectionStart` and `selectionEnd` aren't supported in IE < 9. – Tim Down Jul 18 '11 at 15:44
    • Really awesome (that you didn't use any other, extra plugins), but bad that it doesn't support IE 9 <. That's why I can't accept... sorry. – daGrevis Jul 18 '11 at 17:10
    • @daGrevis If I were you, I would use this and ask users to update their browser to be fully supported. The interface wouldn't even be completely broken, they just wouldn't have their selection preserved. It's sort of like giving IE 6 users square corners instead of CSS 3 rounding. – fletom Jul 18 '11 at 17:21
    • @daGrevis I just think writing code the right way instead of using all kinds of hacks and workarounds to support outdates software is more important than having everything work the same on every browser. You get the advantages of better, more robust, easier to write code -- and not only for this case, but for any future code you write. Things also would be faster because you aren't loading all these plugins, etc. – fletom Jul 18 '11 at 17:25
    • I do totally agree to you, man. Only problem - my boss do not. – daGrevis Jul 18 '11 at 18:33
    • @daGrevis Ah, in that case I sympathize with you. There are a lot of articles online about how it's okay for things to work a bit differently in ancient browsers, so maybe you could send one to your boss and see what happens. Anyways, good luck. – fletom Jul 18 '11 at 18:37
    • @nomulous: I totally disagree. First, IE 9 has been out for 4 months, so expecting everyone to have upgraded already is unrealistic. Second, IE 9 is not available for Windows XP, so huge numbers of people will be simply unable to upgrade for several years to come. Third, and most important, typical users don't care one little bit what the developer had to do to make the page they're looking at work in their browser, and nor should they. You serve your users, not the other way round. Writing code "the right way" on the web means using workarounds and is necessarily a dirty business. – Tim Down Jul 19 '11 at 10:13
    • @Tim Down It takes almost no effort at all to upgrade to the latest and greatest browser version, and users have every reason to. I have no sympathy for people that are using an operating system almost a decade out of date. Windows XP was released when Apple was still shipping Mac OS 9 on their computers. There have been two major Windows releases since then. If you were using hardware from ten years ago, you wouldn't expect the latest games, etc. to run on it. The same should go for people who use out of date software. – fletom Jul 19 '11 at 16:50
    • @nomulous: You're making the mistake of thinking that every user is like you. A large percentage of users just press the big blue "e" for the internet and don't know what a web browser is and don't care. Many others are on corporate networks and have no control over the software on their PCs. For IT departments, upgrading browser's company-wide is often an enormous deal. As a web developer, you need to understand that you're in a small minority of users who are able and know and care enough about browsers to upgrade regularly. Lastly, if Vista had been better there would be fewer XP users now. – Tim Down Jul 19 '11 at 17:10
    • @Tim Down The fact that users just press the internet explorer icon is irrelevant. If you tell them that they need to upgrade their browser for things to work properly, they will. And lots of sites are already doing this! People don't necessarily find it easy upgrading hardware either, but when their computers are running slowly and not working, they sure do it. The same goes for browsers and operating systems. If you just let users use whatever is on their computers even if it was made ten years ago, you're part of the problem. – fletom Jul 19 '11 at 17:19
    • It's not jQuery, you are using it just to find the element. The code actually would be simpler without it :) (or just assign `$('selector')[0]` to a variable) – Alex P. Jul 27 '19 at 10:18
    3

    You may take a look at the following answer which presents a nice plugin for inserting text at the caret position in a <textarea>.

    Community
    • 1
    • 1
    Darin Dimitrov
    • 1,023,142
    • 271
    • 3,287
    • 2,928
    1

    You can use any of the available caret plugins for jQuery and basically:

    1. Store the current caret position
    2. Append the text to the textarea
    3. Use the plugin to replace the caret position

    If you want an "append" function in jQuery, one is easy enough to make:

    (function($){
    $.fn.extend({
        valAppend: function(text){
            return this.each(function(i,e){
                var $e = $(e);
                $e.val($e.val() + text);
            });
        }
    });
})(jQuery);

    Then you can use it by making a call to .valAppend(), referencing the input field(s).

    Brad Christie
    • 100,477
    • 16
    • 156
    • 200
    • Without making the caret to stay in the same position... how to do it? I'm simply searching for something like `append()` to ` – daGrevis Jul 18 '11 at 14:41
    • @deGrevis: In addition to @Darin's post, you can also use [this function](http://stackoverflow.com/questions/1064089/inserting-a-text-where-cursor-is-using-javascript-jquery/1064139#1064139) from another answer to insert it at the caret position. – Brad Christie Jul 18 '11 at 14:45
    • @daGrevis the value of a textarea is just a string; you don't need any special "append()" function. – Pointy Jul 18 '11 at 14:45
    • @deGrevis: or `var $ta = $('textarea'); $ta.val($ta.val() + 'new text');` – Brad Christie Jul 18 '11 at 14:46
    1

    You could use my Rangy inputs jQuery plugin for this, which works in all major browsers.

    var $textarea = $("your_textarea_id");
var sel = $textarea.getSelection();
$textarea.insertText("\nSome text", sel.end).setSelection(sel.start, sel.end);
    Tim Down
    • 318,141
    • 75
    • 454
    • 536