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小時內與您取得聯系。

整合營銷服務商