Hinzufügen einer Zeichenfolge zu einem Textfeld mit jQuery

Ich möchte eine Zeichenfolge zu einem Textbereich hinzufügen, der Wert größer als 2 Zeilen sein kann. Mag sein, dass es eine ASCII ART ist, aber meine Hauptfrage ist, wie kann ich ASCII Art in ein Textfeld schreiben? Ich benutze jQuery und folgende Codes: Wenn ich spezifische Schaltfläche verwende, enthalten Mittel eine Klasse als was der Code sein wird.Hinzufügen einer Zeichenfolge zu einem Textfeld mit 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>

Aber es macht mir nichts zu mir zeigen. Bitte hilf mir.

Quelle

2016-02-28 Shawon

es in einer Textdatei und Last durch Ajax-Drop ... [Demo] (http://plnkr.co/edit/0tdJaLjG2EXVSW2NCNzF). Keine Cross-Browser- oder Escaping-Probleme – charlietfl

Eine weitere moderately well supported Option für mehrzeilige Zeichenketten zu Verwenden Sie das neue ES6 template literals.

Auch normale Texteingaben unterstützen nicht mehrere Zeilen. Eine <textarea> tut jedoch.

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

Quelle

2016-02-28 02:59:43 Hatchet

Es ist möglich, eine mehrzeilige Zeichenfolge in JavaScript anzugeben, aber es wird hässlich sein. Zum Beispiel:

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

Eine alternative Lösung ist eine mehrzeilige Zeichenfolge in versteckten HTML-Code zu setzen, dann entpacken Sie es jQuery auf dem 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() 
     ); 
    }); 
});

Quelle

2016-02-28 02:56:53 Nayuki

Wenn Sie sich leisten können, eine ES6 Feature zu unterstützen, verwenden template strings.

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

Here ist eine Geige mit, wie in Ihrem Fall zu implementieren.

Quelle

2016-02-28 03:06:00

Beils Code

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

Quelle

2016-02-28 03:10:43

Hinzufügen einer Zeichenfolge zu einem Textfeld mit jQuery

Antwort

Verwandte Themen