Axure教程：多行文本框一键清空 / 限制数量功能

文主要讲的是多行文本框一键清空、限制数量功能，一起来看看~

这次我们来讲解一个在多行文本框一键清空 / 限制数量功能。

一、准备元件

首先打开 Axure 新建文件，拖取一个矩形，设置长度为： 375 px ，高度为： 80 px ；
拖取一个多行文本框，设置长度为： 335 px ，高度为： 60 px，右键设置隐藏边框，设置提醒文字“输入文本时显示清除按钮、数量倒计” ，命名为：“ 输入框 ” （这里为随意输入）；
拖取一个文本，设置字体为： 12 px ，色值为 #999999 ，命名为：“ 限制数量展示 ” ；
最后我们再做一个清空按钮，大小 20 px 左右，命名为：“ 清空按钮 ” ，然后点击隐藏。

好的，完成之后我们会得到一下的样子：

二、设置输入框的交互样式

（1）双击 “文本改变时” ，设置输入框的 Case 1 的条件为：全部 – 元件文字 – This 等于（ “ == ” 是等于的意思）空值，设置隐藏清空按钮。

（2）然后我们再双击 “文本改变时” ，设置 Case 2 的条件为：全部 – 元件文字 – This 不等于（ “ ！= ” 是不等于的意思）空值，设置显示清空按钮。

（3）第三步双击 “ 获取焦点时 ” ，设置 Case 1 的条件为：全部 – 元件文字 – This – 不等于空值，设置显示清空按钮。

（4）最后我们再双击 “ 失去焦点时 ” ,设置隐藏清空按钮（此处较简单无配图）。

此时我们就把清空按钮的功能完善了，现在我们可以来看一下（腾讯视频链接）：https://v.qq.com/x/page/p1343kj95p6.html

清空输入框的功能完成了，现在我们要来做字符数量限制，已经完成的小伙伴接着往下看吧！

三、进阶

选择输入框，继续双击 “文本改变时” ，在 Case 3 设置文字于 This 为： “ [[This.text.substr（1,100）]] ” ；
然后再设置 “ 限制数量展示 ” 的富文本为：“ [[100-This.text.length]]/100 ” ，设置为右对齐，不清楚的可以看看下图。

然后我们的所有效果就都已经实现了，各位完成的小伙伴预览一下自己的成果吧！

腾讯视频链接：https://v.qq.com/x/page/i1343yve2yx.html

以上就已制作完所有流程，需要源文件或者有相关问题讨论的，欢迎在下方留言。

end

本文由 @李桂东原创发布于人人都是产品经理。未经许可，禁止转载

ody

常用标签

body分为块级和行内

块级独占整行
行内内容有多少就占多少

文本格式化标签

br 换行

<div>qwer<br/>zxcv</div>

div和span

div 块级标签样式

<div style="background-color: green;">qwer</div>

span 行内标签样式

span style="background-color: green;">zxcv</span>

p 段落

<p>hahahahah</p> 
<p>hahahahahaaa</p>

h 标题

h1~h6y依次变小

   <div>默认文字字体</div>
   <h1>再再再再再粗一点</h1>
   <h2>再再再再粗一点</h2>
   <h3>再再再粗一点</h3>
   <h4>再再粗一点</h4>
   <h5>再粗一点</h5>
   <h6>粗一点</h6>

链接

a 超链接，跳转到指定的地址

<a href="http://www.baidu.com" title="baidu">百度</a>

锚点，点击后跳转到指定位置

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>野鸡平台</title>
</head>
<body>
<h1>章节</h1>
<a href="#i1" title="第一章">第一章 寂寞的春天</a>
<a href="#i2" title="第二章">第二章 寂寞的夏天</a>
<a href="#i3" title="第三章">第三章 寂寞的秋天</a>
<a href="#i4" title="第四章">第四章 寂寞的冬天</a>
<h1>内容</h1>
<div style="height: 1000px;" id="i1">
   <h3>第一章 寂寞的春天</h3>
   <p>春暖花开,万物复苏,又到了交配的季节。</p>
</div>
<div style="height: 1000px;" id="i2">
   <h3>第二章 寂寞的夏天</h3>
   <p>夏天夏天悄悄过去留下小咪咪</p>
</div>
<div style="height: 1000px;" id="i3">
   <h3>第三章 寂寞的秋天</h3>
   <p>今年的秋天真是寂寞呀！！！</p>
</div>
<div style="height: 1000px;" id="i4">
   <h3>第四章 寂寞的冬天</h3>
   <p>下雪</p>
</div>
</body>
</html>

ul ol dl 列表展示

ul 无序列表
ol 有序列表
dl 层级列表
li 列表项目

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>野鸡平台</title>
</head>
<body>
    <ul>
        <li>周杰伦</li>
        <li>林俊杰</li>
        <li>王力宏</li>
    </ul>
    <ol>
        <li>铁锤</li>
        <li>钢弹</li>
        <li>狗蛋</li>
    </ol>
    <dl>
        <dt>河北省</dt>
        <dd>邯郸</dd>
        <dd>石家庄</dd>
        <dt>山西省</dt>
        <dd>太原</dd>
        <dd>平遥</dd>
    </dl>
</body>
</html>

table 表格

table表格标题
thead表格标题
tr 行标签
th 列名
tbody表格内容
tr 列标签
td 列内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6666</title>
</head>
<body>
    <table border="3">   <!--border 选择表格样式-->>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>爱好</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>xxxx</td>
                <td>18</td>
                <td>看书</td>
            </tr>
            <tr>
                <td rowspan="3">aaaa</td>  <!--rowspan 合并单元格-->>
                <td>18</td>
                <td>吃饭</td>
            </tr>
            <tr>
                <td>33</td>>
                <td>heiheihei</td>>
            </tr>>
        </tbody>
    </table>
</body>
</html>

img 图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6666</title>
</head>
<body>
    <!--显示本地图片，找不到图片则显示alt中的文字-->
    <img src="img/lover.png" alt="美女">
    <!--显示网络图片-->
    <img src="https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/t_212313579359018.png" alt="妹子">
</body>
</html>

用户交互

按钮标签

type

buttom: 普通
submit: 提交
reset: 重置

 <button type="button"> 按钮 </button>

input

text，文本框。
password，密码框。
radio，单选框（必须设置name属性相同，否则无法实现）。
checkbox，复选框。
file，文件上传。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>666666</title>
</head>
<body>
    <h3>文本框</h3>
    <input type="text">
    <h3>密码框</h3>
    <input type="password">
    <h3>单选框</h3>
    <input type="radio" name="gender">男
    <input type="radio" name="gender">女
    <h3>复选框</h3>
    <input type="checkbox">篮球
    <input type="checkbox">足球
    <input type="checkbox">橄榄球
    <h3>上传文件</h3>
    <input type="file">
</body>
</html>

select下拉框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML学习</title>
</head>
<body>
    <h3>单选</h3>
    <select>
        <option>上海</option>
        <option>北京</option>
        <option>深圳</option>
    </select>
    <h3>多选</h3>
    <select multiple>
        <option>上海</option>
        <option>北京</option>
        <option>深圳</option>
    </select>
</body>
</html>

textarea多行文本框

<!DOCTYPE html>
卧槽，无情呀
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>HTML学习</title>
</head>
<body>
    <textarea>文本内容写在这里...</textarea>
</body>
</body>
</html>

form表单

用于提交数据到后台

提交时，只会提交form标签内部【用户交互】相关的标签。
<input type="submit" value="提交"> 用于提交当前所在的表单。
<input type="reset" value="重置"> 用于重置当前标签中的选项。
form标签内置属性action="/xx/" ，表示表单要提交的地址。method="get"，表示表单的提交方式。enctype="multipart/form-data"，如果form内部有文件上传，必须加上此设置
form内部【用户交互】相关标签必须设置name，不然提交数据后后端无法获取

// 提交表单之后，实际上会将表单中的数据构造成一种特殊的结构，发送给后台，类似于：
{
    user:用户输入的姓名,
  pwd:用户输入的密码,
    ...
}

radio、checkbox、select 除了要设置name属性以外，还必须设置value属性，因为这三中标签在form表单提交时，不会把看到的内容提交到后台，而是把选择选项对应的value值提交到后台。

、选中去除文本框文字，离开后显示原有文字：

<input name="key" type="text" id="key" value="关键词" size="30"

onmouseover=this.focus();this.select();

onclick="if(value==defaultValue){value='';this.style.color='#000'}"

onBlur="if(!value){value=defaultValue;this.style.color='#999'}" style="color:#999" />

2、选中后方可编辑：

<input type="checkbox" name="tpbox" value="1" onclick="if(this.checked) {txtNo.disabled=false}else{txtNo.disabled=true}">你一定要幸福，我会好好的！

你的姓名：<input type="text" name="txtNo" size="20" value="选中前面的选项方可编辑" disabled>

3、点击链接后方可编辑：

<a href="#" onclick="username.readOnly=false;alert('你好，欢迎使用！')">先点击我哦！</a>

你的姓名：<input id="username" value="--请输入--" size="30" readOnly>

4、输入框从中间输入：从中间输入：

5、输入框变色：输入框改变变色：

<input type="text" size="20" style="background-color:#FFFFFF"

onfocus="style.backgroundColor='#FFFF00'"

onblur="style.backgroundColor='#FFFFFF'">

6、输入框只能输入数字（用的是正则表达式）：你的年龄：

<input onkeyup="value=value.replace(/[^\d]/g,'') "

onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">

7、输入框只能输入中文（用的是正则表达式）：你的中文名：

8、只能输入英文和数字（用的是正则表达式）：

你的昵称：<input onkeyup="value=value.replace(/[\W]/g,'') "

onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"

onkeydown="if(event.keyCode==13)event.keyCode=9">

9、输入框不能编辑，但表单可以获得输入框内的值：

<input value="不可修改" readonly= "true" type="text"/>//:字体颜色为黑体

10、输入框不能编辑，并且表单不能获得输入框内的值

<input value="不可修改" disabled="disabled" type="text"/>//:字体颜色为灰体

11、输入框禁止输入法：

在线咨询

上一篇：16.HTML 表单提交
下一篇：HTML 表格

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商