add a string to a textarea using jQuery

Question

I want to add a string to a text area which has value may be grater than 2 lines. May be it is an ASCII ART but my main question is that how can I post ASCII art to a textarea? I am using jQuery and following codes: If I am using specific button means contain a class than what will be the code.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("button").click(function(){
            $("input:text").val(" (██)
__________(█)_______________██████
_________(███)___________ █████████
________(█████)________████████████
______ (███████)______ (░░░░░░░░░░░)
_____(█████████)_____(░░░░█░░█░░░░)
____(██░░░░░░░██)___ (░░(░░░●░░░)░░░)
_____▒░░█░░█░░▒____ (░░░(░░◡░░)░░░░)
____▒░░░░░░░░░░▒___ (░░░░░░░░░░░░░)
____▒░░█░░░█░░░▒___██(░░░░░░░░░)██
____▒░░░███░░░░▒___███(░░░░░░)████
_____▒░░░░░░░░▒___████████████████
_____██░░░░░░██___████████████████
____▒▒███████▒▒___███ █████████ ███
___▒░░░█████░░░▒__███ █████████ ███
_▒░▒░░░███░░░▒░▒__███ █████████ ███
_▒░░▒░░███░░▒░░▒_ ███ █████████ ███
_▒░░░▒░███░▒░░░▒_ (░░) █████████_(░░)
__▒░░▒░███░▒░░▒_______█████████__(██)
_▒▒▒▒░░███░░▒▒▒▒_____█████████__/▓▓▓\
_▒░░░░░░░░░░░░░▒____ ████__████▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒___████__████▓▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒___████__████▓▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒__(░░░░)_(░░░░)▓▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒___████__████▓▓▓▓▓▓▓▓)
_▒░░░░░░░░░░░░░▒____ ████__████▓▓▓▓▓▓▓)
__▒▒▒▒▒▒▒▒▒▒▒▒▒______████__████▓▓▓▓▓▓)");
        });
    });
    </script>

<!DOCTYPE html>
<html>
    <head></head>
    <body>

    <p>Name: <input type="text" name="user"></p>

    <button>Set the value of the input field</button>

    </body>
</html>

But it does not show me anything to me. Please help me out.

drop it in a text file and load by ajax ...demo. No cross browser or escaping issues — charlietfl
– charlietfl, Commented Feb 28, 2016 at 3:05

Hatchet · Accepted Answer · 2016-02-28 02:59:43Z

Another moderately well supported option for multiline strings is to use the new ES6 template literals.

Also, normal text inputs don't support multiple lines. A <textarea> does, however.

$(document).ready(function() {
  $("button").click(function() {
    $("textarea").val(` (██)
__________(█)_______________██████
_________(███)___________ █████████
________(█████)________████████████
______ (███████)______ (░░░░░░░░░░░)
_____(█████████)_____(░░░░█░░█░░░░)
____(██░░░░░░░██)___ (░░(░░░●░░░)░░░)
_____▒░░█░░█░░▒____ (░░░(░░◡░░)░░░░)
____▒░░░░░░░░░░▒___ (░░░░░░░░░░░░░)
____▒░░█░░░█░░░▒___██(░░░░░░░░░)██
____▒░░░███░░░░▒___███(░░░░░░)████
_____▒░░░░░░░░▒___████████████████
_____██░░░░░░██___████████████████
____▒▒███████▒▒___███ █████████ ███
___▒░░░█████░░░▒__███ █████████ ███
_▒░▒░░░███░░░▒░▒__███ █████████ ███
_▒░░▒░░███░░▒░░▒_ ███ █████████ ███
_▒░░░▒░███░▒░░░▒_ (░░) █████████_(░░)
__▒░░▒░███░▒░░▒_______█████████__(██)
_▒▒▒▒░░███░░▒▒▒▒_____█████████__/▓▓▓\
_▒░░░░░░░░░░░░░▒____ ████__████▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒___████__████▓▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒___████__████▓▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒__(░░░░)_(░░░░)▓▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒___████__████▓▓▓▓▓▓▓▓)
_▒░░░░░░░░░░░░░▒____ ████__████▓▓▓▓▓▓▓)
__▒▒▒▒▒▒▒▒▒▒▒▒▒______████__████▓▓▓▓▓▓)`);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Name:
  <textarea></textarea>
</p>

<button>Set the value of the input field</button>

Nayuki · Accepted Answer · 2016-02-28 02:56:53Z

1

It is possible to specify a multi-line string in JavaScript, but it will be ugly. For example:

// This has 3 lines
var s =
    "abc\n" +
    "def\n" + 
    "ghi";

An alternative solution is to put a multi-line string in hidden HTML code, then extract it using jQuery on the DOM:

<pre id="my-art" style="display:none">here is my
multi-line ascii art
snowman or other graphic</pre>


$(document).ready(function(){
    $("button").click(function(){
        $("input:text").val(
            $("#my-art").text()
        );
    });
});

answered Feb 28, 2016 at 2:56

Nayuki

18.8k6 gold badges61 silver badges84 bronze badges

Comments

Inacio Schweller · Accepted Answer · 2016-02-28 03:06:00Z

If you can afford to support an ES6 feature, use template strings.

 $(document).ready(function(){
        $("button").click(function(){
            $("textarea").val(`
                             (██)
__________(█)_______________██████
_________(███)___________ █████████
________(█████)________████████████
______ (███████)______ (░░░░░░░░░░░)
_____(█████████)_____(░░░░█░░█░░░░)
____(██░░░░░░░██)___ (░░(░░░●░░░)░░░)
_____▒░░█░░█░░▒____ (░░░(░░◡░░)░░░░)
____▒░░░░░░░░░░▒___ (░░░░░░░░░░░░░)
____▒░░█░░░█░░░▒___██(░░░░░░░░░)██
____▒░░░███░░░░▒___███(░░░░░░)████
_____▒░░░░░░░░▒___████████████████
_____██░░░░░░██___████████████████
____▒▒███████▒▒___███ █████████ ███
___▒░░░█████░░░▒__███ █████████ ███
_▒░▒░░░███░░░▒░▒__███ █████████ ███
_▒░░▒░░███░░▒░░▒_ ███ █████████ ███
_▒░░░▒░███░▒░░░▒_ (░░) █████████_(░░)
__▒░░▒░███░▒░░▒_______█████████__(██)
_▒▒▒▒░░███░░▒▒▒▒_____█████████__/▓▓▓\
_▒░░░░░░░░░░░░░▒____ ████__████▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒___████__████▓▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒___████__████▓▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒__(░░░░)_(░░░░)▓▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒___████__████▓▓▓▓▓▓▓▓)
_▒░░░░░░░░░░░░░▒____ ████__████▓▓▓▓▓▓▓)
__▒▒▒▒▒▒▒▒▒▒▒▒▒______████__████▓▓▓▓▓▓)`
        )});
    });

Here is a fiddle with how to implement in your case.

Tim007 · Accepted Answer · 2016-02-28 03:10:43Z

Hatchet's code

$(document).ready(function() {
  $("button").click(function() {
    $("textarea").width(360);
    $("textarea").height(360);
    $("textarea").val(` (██)
__________(█)_______________██████
_________(███)___________ █████████
________(█████)________████████████
______ (███████)______ (░░░░░░░░░░░)
_____(█████████)_____(░░░░█░░█░░░░)
____(██░░░░░░░██)___ (░░(░░░●░░░)░░░)
_____▒░░█░░█░░▒____ (░░░(░░◡░░)░░░░)
____▒░░░░░░░░░░▒___ (░░░░░░░░░░░░░)
____▒░░█░░░█░░░▒___██(░░░░░░░░░)██
____▒░░░███░░░░▒___███(░░░░░░)████
_____▒░░░░░░░░▒___████████████████
_____██░░░░░░██___████████████████
____▒▒███████▒▒___███ █████████ ███
___▒░░░█████░░░▒__███ █████████ ███
_▒░▒░░░███░░░▒░▒__███ █████████ ███
_▒░░▒░░███░░▒░░▒_ ███ █████████ ███
_▒░░░▒░███░▒░░░▒_ (░░) █████████_(░░)
__▒░░▒░███░▒░░▒_______█████████__(██)
_▒▒▒▒░░███░░▒▒▒▒_____█████████__/▓▓▓\
_▒░░░░░░░░░░░░░▒____ ████__████▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒___████__████▓▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒___████__████▓▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒__(░░░░)_(░░░░)▓▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒___████__████▓▓▓▓▓▓▓▓)
_▒░░░░░░░░░░░░░▒____ ████__████▓▓▓▓▓▓▓)
__▒▒▒▒▒▒▒▒▒▒▒▒▒______████__████▓▓▓▓▓▓)`);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Name:
  <textarea></textarea>
</p>

<button>Set the value of the input field</button>

Collectives™ on Stack Overflow

add a string to a textarea using jQuery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related