注意:antd 4.x 版本按照官方文档所展示的例子写就可以了,如果项目antd版本在 3.x 甚至更低,可继续往下看
1、去掉右下角图标
直接在标签上设置样式:
resize: ‘none’
即可
<TextArea
style={{resize: 'none'}}
placeholder={"请输入"}
2、去掉滚动轴
百度了很多,但是没有发现很好用的去掉滚动轴的方法,很多都是说用div模拟textarea实现想要的效果。或者是通过设置JS来控制textarea的高度。不太好用。
在这里,去掉滚动轴也要特别考虑当前项目版本问题
3.24.0 之前的版本
直接在标签里添加一个属性: autosize
<TextArea
autosize
placeholder={"请输入"}
注意:“autosize” 属性在3.24.0之后的版本中会被废弃,所以谨慎使用。
3.24.0 之后的版本
直接在标签里添加一个属性: autoSize
<TextArea
autoSize
placeholder={"请输入"}
两者不同的地方只有autoSize的大小写
在IE下文本框textarea会显示滚动条(如下:)
去掉textarea横向或纵向滚动条办法:
<textarea style="overflow:hidden"></textarea>
可以通过overflow-x:hidden和overflow-y:hidden控制横向和纵向滚动条
要设置textarea文本域的滚动条是否开启,使用style.overflow-x属性来控制。如:如果要隐藏该文本域的横向滚动条,在style属性中增加overflow-x属性控制,如下: <textarea id=txtComments style="overflow-x:hidden"></textare
由于
antd的input有input,inputNumber,
textarea各不相同,回调函数有不一样,提示和字符计数,前后的提示,各有用法,封装起来,统一书写方法,不用每次看文档。
<template >
<div class="j-input" v-if="mode == 'input'">
<template v-if="needTips">
<a-input
v-bind="$attrs"
一、如何限制TextArea输入个数
正常情况下我们限制TextArea的输入个数,只需要在标签里面输入maxLength={10}便可以限制只能输入10个字符了
二、问题出现的场景
因为结合了formItem使用,所以将TextArea放到了FormItem里面,但是由于ui要求需要实现如下布局:
所以我再TextArea的外面包了一层div,然后问题就出来了,虽然TextArea里面还是限制输入10个字符,但是通过form.validateFields()拿到antd里的form表单后发现竟然拿到了11
本人在开发过程中遇到这样一个问题,打算通过useEffect来初始化表单的默认值,这里使用的是react下的hooks Api,但是textArea的初始值始终无法设置成功:
import React, { useState, useEffect, useRef } from 'react';
// 文本框默认内容
const [textAreaContent, setText] = useS...