weex-13-组件textarea使用

本节学习目标

熟练掌握textarea组件的使用

它是什么?

textarea 多行输入组件

特性

1.placehold 设置占位符,提醒用户应该输入什么内容,或者输入的规则,只能输入数字等等 2.disabled 设置是否支持用户输入,设置为true 3.autofocus进入页面是否自动获得焦点 4.rows 组件允许显示的行数 5.如何将数据和变量进行绑定 6.慎用伪类,前方有坑 7.高度和行数同时设置,会怎么样 8.textarea事件检测

开始吧

1.设置placehold

6AC6E2E2-A951-4B0F-BBC5-6776DC4E58DC.png

<textarea placeholder="请输入您的姓名"></textarea>

注意 不要讲placehold写入到css样式中去,iOS 测试不起作用

2.设置用户不能输入内容

<textarea disabled="true" placeholder="请输入您的姓名"></textarea>

一般像这种用户不能使用的情况下,要将控件背景颜色设置成灰色系列,所以我们就借助伪类,设置一下

.textarea:disabled{
    background-color: lightgray;
}

3E047F50-D55C-4D51-9E81-34BFCF375322.png

伪类格式:

样式类名 +‘:’ +伪类名称

注意这个组件在enabled 情况下会有些坑,继续往下看

3.自动获得焦点 当用户进入这个页面的时候,我们让某个textarea组件获得焦点,怎么设置呢?见下面的代码

<textarea  autofocus="true></textarea>

4.rows多行显示

ED1920E8-2EE8-4101-8C7E-D55C3E102966.png

<textarea rows='10'></textarea>

注意

不能将rows设置在css样式中,这样做不会产生任何效果

这里解释一下rows='10' 是以系统字体40px为单位的,设置行高为十行,也就是说组件的高度为10*40px

5.如何将数据和变量进行绑定

我们先定义一个变量

export default{
    data(){
        return{
            value:''
        }
    }
}

然后将变量绑定到组件上

<textarea  v-model='value'><textarea>

解释一下

这个就是MVVM架构中的最常用的双向绑定,,双向绑定就是说,如果textarea 输入的值改变了,那么value的值也会随着改变,如果我们设置value的值,组件显示的值也会自动改变

6.慎用伪类,前方有坑

伪类的使用上面提过了,接下来我们看看还有那些伪类可以使用

    // 输入激活
.textarea:active{
    background-color: cornflowerblue;
}
    // 组件不支持输入
.textarea:disabled{
    background-color: lightgray;
}
   //  组件获得焦点
.textarea:focus{
    background-color: green;
}
   // 组件可用
.textarea:enabled{
    background-color: paleturquoise;
}

大坑

当你设置了伪类的时候,在输入框中输入内容,你会发现placehold仍然在,消失不了,所以请谨慎使用

A587F765-2236-4727-AFCA-88F7407FCEDE.png

7.高度和行数同时设置,会怎么样

如果你设置了rows

<textarea  rows='10' placeholder="请输入您的姓名">  </textarea>

同时又设置了高度样式

.textarea{
    background-color: paleturquoise;
    font-size: 32px;
    height:400px;
}

8.textarea事件检测

事件主要有以下几种

  • focus获得焦点
  • blur失去焦点
  • input/change输入值改变

接下来看如何使用

<textarea class="textarea" v-model='value'  disabled="false" autofocus="true" @input="input" @focus="focus" @blur="blur" rows='10' placeholder="请输入您的姓名"></textarea>

之前讲过事件绑定的完整写法是v-on:事件='定义的方法'简写为@事件='定义的方法'

下面是定义的方法

<script>
export default{
    methods:{
        input(e){
        },
        focus(e){
        },
        blur(e){    
        }
    }
}
</script>

本节的内容到这里已经全部讲完,这个组件的用法你掌握了吗?

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏用户2442861的专栏

QLineEdit 输入验证(相关的设置)

LineEdit提 供一个文字输入栏位,可以输入文字或数字,我们可以对输入作验证,或是设定为一般显示、密码显示等等,以下的程式是个简单的设定示范:

3492
来自专栏林德熙的博客

.net Framework 源代码 · ScrollViewer 使用原理其他源代码分析

本文是分析 .net Framework 源代码的系列,主要告诉大家微软做 ScrollViewer 的思路,分析很简单。 看完本文,可以学会如何写一个 Scr...

1121
来自专栏九彩拼盘的叨叨叨

CSS 核心技能点

1002
来自专栏小白安全

给网站顶部添加一个彩色横条

效果图片 开始  首先,我们需要图片,直接贴出来吧,需要的请直接右键另存为。 GIF滚动优化版   接着,在网站顶部适当位置添加一个Div,自...

2885
来自专栏数据小魔方

创意九宫格图片制作技巧!

今天给大家分享九宫格照片的制作技巧! ▽ 是不是每次看到朋友圈有人发九宫格图片 都觉得特别羡慕 其实这种图片可以自己制作 步骤也不复杂 下面交给大家三种制作方法...

4399
来自专栏我和未来有约会

CaseStudy(showcase)布局篇-如何做一个自适应窗口大小的布局

做silvelight也有一段时间了,相册、游戏,刚刚完成的showcase这个小程序算是一个阶段了。这里就以showcase这个项目来做一下CaseStudy...

1908
来自专栏python3

body标签中相关标签

字体标签包含:h1~h6、<font>、<u>、<b>、<strong><em>、<sup>、<sub>

1741
来自专栏前端说吧

JS-事件之鼠标、键盘都能控制的下拉选框效果

3695
来自专栏闻道于事

正式学习第一天下午——基础标签及其属性

今天下午学习了html中的基础标签及其属性。以下面的HTML代码为例。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...

2665
来自专栏偏前端工程师的驿站

CSS魔法堂:稍稍深入伪类选择器

 过去零零星星地了解和使用:link、::after和content等伪类、伪元素选择器,最近看书时发现这方面有所欠缺,于是决定稍微深入学习一下,以下为伪类部分...

1392

扫码关注云+社区

领取腾讯云代金券