Question

我想在文本区域添加一个字符串，其值可能大于2行。可能是ASCII ART，但我的主要问题是如何将ASCII艺术发布到textarea？我正在使用jQuery和以下代码：如果我使用特定按钮意味着包含一个类而不是代码。

＆＃13;

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

＆＃13;

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

＆＃13;

但它并没有向我展示任何东西。请帮帮我。

Answer 1

多行字符串的另一个moderately well supported选项是使用新的ES6 template literals。

此外，普通文本输入不支持多行。但是<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>

Answer 2

可以在JavaScript中指定多行字符串，但它会很难看。例如：

html

另一种解决方案是将多行字符串放在隐藏的HTML代码中，然后在DOM上使用jQuery提取它：

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

Answer 3

如果您能够支持ES6功能，请使用template strings。

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

Here是如何在您的案例中实施的小提琴。

Answer 4

Hatchet的代码

＆＃13;

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

＆＃13;

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

＆＃13;

使用jQuery

4 个答案: