반응형

textarea 입력대로 화면에 출력하기

<!DOCTYPE html>
<head>
<title>Recipe</title>
<script>

window.onload=function() {
 document.getElementById("preview").onclick=processText;
}

function processText() {
 var txtBox = document.getElementById("inputbox");
 var lines = txtBox.value.split("\n");

 // generate HTML version of text
 var resultString  = "<p>";
 for (var i = 0; i < lines.length; i++) {
   resultString += lines[i] + "<br />";
 }
 resultString += "</p>";

 // print out to page
 var   blk   = document.getElementById("result");
 blk.innerHTML  =  resultString; 
}

</script>

</head>
<body>
<textarea id="inputbox" cols="20" rows="10"></textarea>
<div><button id="preview">Preview</button></div>
<div id="result"></div>
</body>

textarea를 줄별로 처리하기

//줄 바꿈 문자를 기준으로 textarea 문자열을 분리
var txtBox = document.getElementById("inputbox");
var lines = txtBox.value.split("\n");

//내용을 HTML 버전으로 변경
var resultString  = "<p>";
for (var i = 0; i < lines.length; i++) {
    resultString += lines[i] + "<br>";
}
resultString += "</p>";

//페이지에 출력
var   blk   = document.getElementById("result");
blk.innerHTML  =  resultString; 
반응형

+ Recent posts