使用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将字符串添加到文本区域

回答

相关问题