使用jQuery將字符串添加到文本區域

我想將字符串添加到文本區域，該區域的值可能比2行更粗。也許這是一個ASCII藝術，但我的主要問題是，我怎麼能張貼ASCII藝術到textarea？我正在使用jQuery和下面的代碼：如果我使用特定的按鈕意味着包含一個類比什麼將是代碼。使用jQuery將字符串添加到文本區域

<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>

但它不會告訴我什麼我。請幫助我。

來源

2016-02-28 Shawon

阿賈克斯將它放在一個文本文件，負載... [演示]（http://plnkr.co/edit/0tdJaLjG2EXVSW2NCNzF）。沒有跨瀏覽器或轉義問題 – charlietfl

另一個moderately well supported選項多行字符串是使用新的ES6 template literals。

此外，正常的文本輸入不支持多行。然而，A <textarea>確實如此。

$(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>

來源

2016-02-28 02:59:43 Hatchet

可以在JavaScript中指定一個多行字符串，但它會很難看。例如：

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

另一種解決方案是將一個多行字符串中隱藏的HTML代碼，然後在DOM使用jQuery提取它：

<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() 
     ); 
    }); 
});

來源

2016-02-28 02:56:53 Nayuki

如果你能負擔得起支持ES6功能，使用template strings。

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

Here是如何在你的情況下實施的小提琴。

來源

2016-02-28 03:06:00

斧頭的代碼

$(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>

來源

2016-02-28 03:10:43

使用jQuery將字符串添加到文本區域

回答

相關問題