1. 程式人生 > >js 給textarea輸入框內容自動新增換行符

js 給textarea輸入框內容自動新增換行符

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
</head>


<body>
<div id="caaaa" align="center">
<textarea style="font-size:14px;width: 100%;height: 200px;background:#CCC;border:1px #000 solid;"></textarea>
<button id="upload">提交</button>
</div>
</body>


</html>


js:
<script>
var font_size = 14;
$(document).ready(function() {
$("#upload").click(function() {
$("#caaaa").find("textarea").each(function(index, element) {
var textareaValue = '';
var value_text = $(this).val();
var width_length = $(this).width() - font_size;
var valueList = value_text.split("\n");
for(var j = 0; j < valueList.length; j++) {
var value_length = valueList[j].length * font_size;
if(value_length > width_length) {
var textarealength = value_length / font_size;
var widthlength = width_length / font_size;
var tt = Math.ceil(value_length / width_length);
for(var i = 0; i < tt; i++) {
if(i == tt - 1) {
textareaValue += valueList[j].trim().substring(widthlength * i, textarealength) + "\n";
} else {
textareaValue += valueList[j].trim().substring(widthlength * i, widthlength * (i + 1)) + "\n";
}
}
} else {
textareaValue += valueList[j] + "\n";
}
}
textareaValue = textareaValue.replace(/\n\n/g, "\n")
$(this).val(textareaValue);
$(this).css({
"border": "none",
"background": "none",
"width": $(this).width()
});
});
})
})
</script>