版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_37695006/article/details/85092415
看到这个需求有一部分人认为给textarea加上rows和cols就可以满足需求,emmmm...可以看看属性的定义。
所以还是要用JS来计算的,就是在value改变的时候调用计算函数,直接附上完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<textarea name="" id="textarea" cols="50" rows="5" ></textarea>
<div id="countWarp"></div>
</body>
<script>
var textarea = document.getElementById("textarea");
var countWarp = document.getElementById("countWarp");
// textarea.addEventListener('keyup', getCount, false);
textarea.addEventListener('input', getCount, false);
function splitStr18(str) {
if (str.length <= 18) {
return [str];
}
const getStr = str.slice(0, 18);
const overStr = str.slice(19);
return [getStr].concat(splitStr18(overStr));
}
function getCount(e) {
const texts = e.target.value.split('\n');
let filterTexts = [];
for (var i = 0; i < texts.length; i++) {
if (texts[i].length > 18) {
const textArr = splitStr18(texts[i]);
filterTexts = filterTexts.concat(textArr);
} else {
filterTexts.push(texts[i]);
}
}
if (filterTexts.length > 5) {
filterTexts = filterTexts.slice(0, 5)
console.log("最后了~");
}
console.log(filterTexts);
textarea.value = filterTexts.join('\n');
countWarp.innerHTML = `祝福语(${filterTexts.length}/5 行)`;
}
</script>
</html>
我当时项目中是在VUE中使用的,代码大同小异,再附上代码:
function splitStr18(str) {
if (str.length <= 18) {
return [str];
}
const getStr = str.slice(0, 18);
const overStr = str.slice(19);
return [getStr].concat(splitStr18(overStr));
}
/** methods里面
* 获取输入框数据
*/
getCount: function(e){
this.isEnd = false;
if(this.text.length==0){
this.rowNum = 0;
return;
}
let texts = this.text.split('\n');
let filterTexts = [];
for (var i = 0; i < texts.length; i++) {
if (texts[i].length > 18) {
let textArr = splitStr18(texts[i]);
filterTexts = filterTexts.concat(textArr);
} else {
filterTexts.push(texts[i]);
}
}
if (filterTexts.length > 5) {
console.log("最后了~");
filterTexts = filterTexts.slice(0, 5);
this.isEnd = true;
}
console.log("获取输入框数据: ", filterTexts);
this.$nextTick(()=>{
this.text = filterTexts.join('\n');
})
console.log("=====", this.text);
this.rowNum = filterTexts.length;
},