logo标签列表

使用jQuery将字符串添加到文本区域

javascriptjqueryhtml
6

我想向文本区域添加一个字符串，该文本区域的值可能大于2行。它可能是ASCII艺术，但我的主要问题是如何将ASCII艺术发布到文本区域？ 我正在使用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>

但是它对我没有任何显示。请帮助我解决问题。
将其放入文本文件并通过 AJAX 加载…演示。没有跨浏览器或转义问题。 - charlietfl
4个回答
4

对于多行字符串，另一个得到适度支持的选项是使用新的ES6模板文字。

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

1
在JavaScript中可以指定多行字符串，但这样做会显得很丑陋。例如：
// This has 3 lines
var s =
    "abc\n" +
    "def\n" + 
    "ghi";

另一种解决方案是将多行字符串放在隐藏的HTML代码中，然后使用jQuery在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
如果你有能力支持ES6的功能，可以使用模板字符串。
 $(document).ready(function(){
        $("button").click(function(){
            $("textarea").val(`
                             (██)
__________(█)_______________██████
_________(███)___________ █████████
________(█████)________████████████
______ (███████)______ (░░░░░░░░░░░)
_____(█████████)_____(░░░░█░░█░░░░)
____(██░░░░░░░██)___ (░░(░░░●░░░)░░░)
_____▒░░█░░█░░▒____ (░░░(░░◡░░)░░░░)
____▒░░░░░░░░░░▒___ (░░░░░░░░░░░░░)
____▒░░█░░░█░░░▒___██(░░░░░░░░░)██
____▒░░░███░░░░▒___███(░░░░░░)████
_____▒░░░░░░░░▒___████████████████
_____██░░░░░░██___████████████████
____▒▒███████▒▒___███ █████████ ███
___▒░░░█████░░░▒__███ █████████ ███
_▒░▒░░░███░░░▒░▒__███ █████████ ███
_▒░░▒░░███░░▒░░▒_ ███ █████████ ███
_▒░░░▒░███░▒░░░▒_ (░░) █████████_(░░)
__▒░░▒░███░▒░░▒_______█████████__(██)
_▒▒▒▒░░███░░▒▒▒▒_____█████████__/▓▓▓\
_▒░░░░░░░░░░░░░▒____ ████__████▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒___████__████▓▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒___████__████▓▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒__(░░░░)_(░░░░)▓▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒___████__████▓▓▓▓▓▓▓▓)
_▒░░░░░░░░░░░░░▒____ ████__████▓▓▓▓▓▓▓)
__▒▒▒▒▒▒▒▒▒▒▒▒▒______████__████▓▓▓▓▓▓)`
        )});
    });

这里有一个示例，展示如何在您的情况下进行实现。

1
的代码 

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接