2016-02-28 3 views
6

Я хочу добавить строку в текстовую область, значение которой может быть больше двух строк. Может быть, это ASCII ART, но мой главный вопрос заключается в том, как я могу опубликовать искусство 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>

Но он не показывает мне что-нибудь для меня. Пожалуйста, помогите мне.

+0

поместите его в текстовый файл и загрузки с помощью AJAX ... [демо] (http://plnkr.co/edit/0tdJaLjG2EXVSW2NCNzF). Нет перекрестного браузера или проблем с экранированием – charlietfl

ответ

4

Другой 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>

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, используйте template strings.

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

Here является скрипку с тем, как реализовать в вашем случае.

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>

Смежные вопросы