vue实现textarea框，文字高度自适应

vue实现textarea框，文字高度自适应，https://blog.csdn.net/qq_38128179/article/details/103591717

下面是两种方式，注释掉的是一种，不可以输入字数超出100字，另一种是可以超出，超出字数变红提示

<template><div class="textarea"><!-- <Fieldv-model="memo"rows="5":placeholder="placeholderText"type="textarea":maxlength="maxlength"show-word-limitborder@focus="onInput"ref="memo":value="parameter.text"@input="inputHandler":autosize="true"/> --><textareastyle="width: 100%"cols="40"rows="5":placeholder="placeholderText":minlength="maxlength"v-model="memo"ref="form__input"id="textarea"v-on:keyup="content()":onFocus="focus()":onBlur="blur()"@input="handleInput"></textarea><p class="textNum"><span :class="conterNum > maxlength ? 'conter_Num' : ''">{{conterNum}}</span><span>/{{ maxlength }}</span></p></div>
</template><script>
import { Field, Toast } from 'vant';
import 'vant/lib/index.less';
import { resize } from '@/utils/resize';export default {name: 'Demo',components: {Field, Toast},data () {return {notNumbers: false,conterNum: 0,maxlength: 100,memo: '',placeholderText: "请输入您的问题",parameter: {text: ""}}},created () {resize()},mounted () {// this.$refs.form__input.focus()//一进页面弹出键盘},methods: {//根据输入长度高度自适应handleInput (e) {e.target.style.height = 'auto';e.target.style.height = e.target.scrollHeight + 'px';},content () {this.notNumbers = falsethis.conterNum = this.memo.length;this.parameter.text = this.memo},focus () {this.conterNum = this.memo.length;this.parameter.text = this.memo},blur () {this.conterNum = this.memo.length;this.parameter.text = this.memo},// onInput () {//   this.$refs.memo.focus();// },// inputHandler (value) {//   value = this.max > 0 ? Math.min(value, this.max || 0) : value//   this.$emit('input', value)//   this.parameter.text = value//   if (value.length >= this.maxlength) {//     Toast(`最多输入${this.maxlength}字`)//     this.$ZhiYue.toast(`最多输入${this.maxlength}字`)//   }// },},
}
</script>
<style scoped lang="scss">
* {margin: 0;padding: 0;
}.textarea {margin: 0.2rem 0.32rem 0 0.32rem;
}.input {height: 0.9rem;border: none !important;border-radius: 0.08rem;outline: none;font-size: 15px;border-radius: 0.1rem;flex: 7;
}
::v-deep .van-cell {font-size: 0.32rem;font-family: PingFangSC, PingFangSC-Regular;font-weight: 400;text-align: left;color: #cccccc;
}
::v-deep .van-field__control {font-size: 0.3rem;font-family: PingFangSC, PingFangSC-Regular;font-weight: 400;text-align: left;color: #333333;line-height: 0.44rem;
}input::-webkit-input-placeholder {font-size: 0.3rem;line-height: 0.3rem;font-family: PingFangSC, PingFangSC-Regular;font-weight: 400;color: #cccccc;
}
#textarea {border: 1px solid #f3f3f3;font-size: 0.3rem;font-family: PingFangSC, PingFangSC-Regular;font-weight: 400;text-align: left;color: #333333;outline: none;resize: none;border: none;
}
textarea::-webkit-input-placeholder {font-size: 0.32rem;font-family: PingFangSC, PingFangSC-Regular;font-weight: 400;text-align: left;color: #cccccc;
}
.textNum {position: absolute;right: 0.32rem;font-size: 0.26rem;font-family: PingFangSC, PingFangSC-Regular;font-weight: 400;text-align: right;color: #999999;
}
.conter_Num {color: #ff3e3e;
}
</style>

vue实现textarea框，文字高度自适应相关推荐

div模拟textarea文本框，输入文字高度自适应，且实现字数统计和限制
需求: 文本框可根据输入内容高度自适应,不带滚动条,高度可变的那种,我搜索了很多,发现textarea无法实现我的需求,scrollHeigh这个无法获取实际内容的高度(我用的是那种简单的,可能我写的 ...
textarea如何实现高度自适应？
文章来源:http://blog.csdn.net/tianyitianyi1/article/details/49923069 转自:http://www.xuanfengge.com/textar ...
html textarea文本域高度自适应
1.可直接在菜鸟教程网站测试页面中测试 <!DOCTYPE html> <html> <head><meta charset="utf-8&quo ...
java textarea 大小_textarea高度自适应的两种方案
阅读全文你将获得以下解决方案. 点击长文本编辑textarea,自动获得焦点随着输入值自动伸缩高度可复制添加信息可粘贴文本可粘贴图片以下实例代码执行环境为Chrome80 方案一 HTML5 ...
html textarea a 整体,html textarea文本域高度自适应
1.可直接在菜鸟教程网站测试页面中测试菜鸟教程(runoob.com) id="symptomTxt" οninput="autoTextAreaHeight(thi ...
div模拟textarea文本域轻松实现高度自适应——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com 本文地址: http://www.zhangxinxu.com/wordpress/?p=1362 一.关于t ...
QComboBox下拉框文字如何在字体变大之后自适应高度
一.简述一般我们给QComboBox设置完字体之后,在显示上并没有什么问题如下图. a.正常状态由于程序在最大化的时候,因为主窗口尺寸变大,需要整体改变所有控件的尺寸,文字的大小,所以在窗口最大化 ...
vue+element弹窗可拖拽拉伸和弹窗内table高度自适应
需求是这样的:需要将目前的el-dialog弹窗都改成可拉伸和拖拽的.并且做自适应.(一番交涉下来,最终是如果弹窗里面有table的话,我们给table的高度自适应,普通表单不需要). 确定了需求,准 ...
php textarea 默认值,html中的textarea属性大全(设置默认值高度自适应获取内容限制输入字数 placeholder)...
1.textarea设置默认值 HTML: 此段代码设置一个textarea文本框并且设置为隐藏 2.textarea高度自适应今天需要些一个回复评论的页面,设计师给的初始界面就是一个只有一行的框 ...

vue实现textarea框，文字高度自适应

vue实现textarea框，文字高度自适应相关推荐

最新文章

热门文章