jQueryを使って文字列をテキストエリアに追加する

2行以上の値を持つ文字列をテキスト領域に追加したい。 ASCIIアートですが、私の主な質問は、ASCIIアートをテキストエリアに投稿するにはどうすればいいのですか？私は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

は、Ajaxによって、テキストファイルとロード... [デモ]（http://plnkr.co/edit/0tdJaLjG2EXVSW2NCNzF）にドロップします。クロスブラウザやエスケープの問題はありません – charlietfl

複数行の文字列のためのもう一つのmoderately well supportedオプションがにあります新しいES6 template literalsを使用してください。

また、通常のテキスト入力は複数の行をサポートしていません。しかし、<textarea>はそうです。あなたはES6機能をサポートするために余裕があれば

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

代替ソリューションは、DOM上のjQueryを使用して、それを抽出し、隠されたHTMLコードで複数行の文字列を置くことです：

<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

、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を使って文字列をテキストエリアに追加する

答えて

関連する問題