Geek Answers Handbook

Add a string to the text box using jQuery

I want to add a line to a text area whose value can be more than two lines. Maybe this is ASCII ART, but my main question is how can I publish ASCII art in a text box? I use jQuery and the following codes: If I use a specific button, then the class contains a class than 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 that doesn't show me anything. Please help me.

+6
source share
4 answers

Another moderately well-supported option for multi-line strings is to use the new ES6 Sample Literals .

In addition, regular text inputs do not support multiple lines. A <textarea> , 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>
+4
source

You can specify a multi-line string in JavaScript, but it will be ugly. For instance:

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

An alternative solution is to put the multi-line string in hidden HTML code and then extract it using jQuery in 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() ); }); });
+1
source

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

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

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

+1
source

Top 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>
+1
source

More articles:


All Articles