axure文本框值相加_Axure教程:計數文本域實現

原標題:Axure教程:計數文本域實現

制定UI規范時,遇到實現“限制字數的文本域”的交互問題,即當用戶輸入的字數長度超過限制要求,如何只保留規定長度的文本?

效果如下:

我們知道【Number】類型的文本框,可以限制輸入文本的最大長度,通常用在11位電話號碼的情形較多,如下:

可惜,多行文本框并沒有類型的區別,沒有最大長度的限制。最后,只能聯想到使用:

函數[[LVAR1.length]]:獲得元件字符串的長度(即1234.length=4);以及函數[[LVAR1.substring(from,to)]]:截取第from位到to位的字符串;

(即[[12345.substring(1,4)]]=234,也就是說截取第一位到第四位的數字但不包括第一位。)來實現上述的效果。

一、頁面布局

為了使文本框的交互體驗更好,本案例中,加入了一個矩形背景框,作為文本框的邊框。主要是實現,鼠標點擊文本框獲得焦點時,邊框線高亮的交互效果。因此,需要將文本框本身的邊框線隱藏掉。

排版如下:

二、交互效果

(1)實現鼠標點擊文本框時,邊框線高亮效果

首先選中“文本框”:

1)添加獲得焦點事件

屬性 – 雙擊“獲得焦點時”交互事件,元件 – 設置選中 – 勾選“背景框”,狀態值為ture。

2)添加失去焦點事件

屬性 – 雙擊“失去焦點時”交互事件,元件 – 設置選中 – 勾選“背景框”,狀態值為false。

其次選中“背景框”:

設置選中樣式:

屬性 – 交互樣式設置 – 選中,將邊框線顏色設為主題色#0066ff;

(2)實現文本框的字數統計展示效果

主要用到函數:[[LVAR1.length]]

選中“文本框”:(此案例限制字數為 60)

1)添加“文本改變時”事件

屬性- 雙擊“文本改變時”交互事件,元件 – 設置文本,勾選“計數”,文本值為 [[LVAR1.length]]/60,其中[[LVAR1.length]]為文本框的字數。

(3)實現字數超過限制時,只保留規定長度內文本的交互效果

主要用到函數:[[LVAR1.substring(from,to)]]。

只需要在上面的“文本改變時”事件中,選擇左側的元件 – 設置文本,勾選“文本域”,文本值為[[LVAR1.substr(0,60)]],其中,LVAR1為文本域的文本,即截取文本域前60個字符。

三、預覽效果

學習更多教程,可關注本人公眾號:艾斯的Axure峽谷。歡迎大家留言評論,也可以留下你期待看到的交互效果。

示例演示:

作者:火星人~艾斯,公眾號:艾斯的Axure峽谷

本文由 @火星人~艾斯 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議返回搜狐,查看更多

責任編輯:

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/276096.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/276096.shtml
英文地址,請注明出處:http://en.pswp.cn/news/276096.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

figma下載_Figma和ProtoPie中的原型制作,比較

figma下載第1部分 (Part 1) Prototyping has never had such a high profile with a whole host of tools that now give you varying ability to realize your designs beyond their static UI and into a working usable thing. It’s fair to say that prototyping within t…

拗口翻譯

I find many times people use temporary tables because they learned in other databases that joining too many tables in a single query is a ?bad thing?. This is a practice that must be unlearned for Oracle development. Rather then trying to out‐smart the …

javascript 手機手勢動作touch觸屏原理分析

轉載鏈接:http://www.lvtao.net/web/220.html $(function(){document.getElementById("moveId").addEventListener(touchstart, touchStart);document.getElementById("moveId").addEventListener(touchmove, touchMove);document.getElementBy…

并發工具類(四)線程間的交換數據 Exchanger

前言JDK中為了處理線程之間的同步問題,除了提供鎖機制之外,還提供了幾個非常有用的并發工具類:CountDownLatch、CyclicBarrier、Semphore、Exchanger、Phaser;??CountDownLatch、CyclicBarrier、Semphore、Phaser 這四個工具類提…

「前端組件化」該怎么理解?

大家好,我是若川。今天分享一篇關于「前端組件化」的好文。歡迎點擊下方卡片關注我。以下是正文~這里我們一起來學習前端組件化的知識,而組件化在前端架構里面是最重要的一個部分。講到前端架構,其實前端架構中最熱門的就有兩個話題&#xff…

大屏設計的視覺統一_視覺設計中的統一

大屏設計的視覺統一視覺設計的統一性是什么? (What is unity in visual design?) The concept of unity in visual design means a group of elements working together to create a greater whole. It means, as the clich goes: A whole that is greater than th…

l2范數求導_機器學習中的范數規則化之(一)L0、L1與L2范數

source: https://blog.csdn.net/zouxy09/article/details/24971995zouxy09qq.comhttp://blog.csdn.net/zouxy09今天我們聊聊機器學習中出現的非常頻繁的問題:過擬合與規則化。我們先簡單的來理解下常用的L0、L1、L2和核范數規則化。最后聊下規則化項參數的選擇問題。…

9.struts1.x中tiles框架的使用

在頁面直接使用titles標簽先引入標簽&#xff1a;<%taglib uri"http://struts.apache.org/tags-tiles" prefix"tiles" %> 將模板頁面要代替的內容用標簽占位&#xff1a;<tiles:insert attribute"content"></tiles:insert> 在…

Debian 9.6.0 + OpenMediaVault 4.x : U盤作系統盤時遇到的問題

前幾天在虛擬機試驗的時候還說裝到實機一般也沒什么問題&#xff0c;然后突然間想試試如果把 Debian9OMV 都放到U盤里會怎么樣。于是就折騰&#xff08;然后懵逼&#xff09; 先總結一下 寫入openmediavault官方的iso到U盤使用UNetbootin寫入Debian9的iso使用UltraISO的默認設置…

新浪微博、騰訊微博、QQ空間、人人網、豆瓣 一鍵分享API

轉載鏈接&#xff1a;http://www.bluesdream.com/blog/sina-tencent-renren-douban-share-a-key-api.html 新浪微博&#xff1a; http://service.weibo.com/share/share.php?url count表示是否顯示當前頁面被分享數量(1顯示)(可選&#xff0c;允許為空) &url將頁面地址轉…

跟著官方文檔能學懂React Hooks就怪了

大家好&#xff0c;我是若川。今天分享一篇關于「React Hooks」的好文。歡迎點擊下方卡片關注我。以下是正文~回想下你入門Hooks的過程&#xff0c;是不是經歷過&#xff1a;類比ClassComponent的生命周期&#xff0c;學習Hooks的執行時機慢慢熟練以后&#xff0c;發現Hooks的執…

origin圖上顯示數據標簽_Origin(Pro):寒假都結束了,這個圖還是不會畫?【數據繪圖】...

寒假前給大家分享了一個圖&#xff0c;大家要的教程來了。【數據繪圖】好圖分享&#xff1a;寒假&#xff1f;不存在的&#xff01;?mp.weixin.qq.com繪圖思路&#xff1a;左側起止時間&#xff1a;散點圖&#xff0c;交換XY坐標軸&#xff1b;中間的連線為Drop Lines&#xf…

可以激發設計靈感的音樂_建立靈感庫以激發您的創造力

可以激發設計靈感的音樂I often find a lot of inspiration from work I see while scrolling social media. Saving art or images that inspire you allows you to build a library of resources to draw from whenever you’re working on a project.在滾動社交媒體時&#…

CentOS服務器上部署 oracle10gr2

1、下載Centos系統 Linux 鏡像文件。 推薦使用 CentOS5.4&#xff0c;下載地址&#xff1a;http://isoredirect.centos.org/centos/5/isos/i386/ 。這個是 32 位的 Linux 系統鏡像安裝文件&#xff0c;進入下載頁面后&#xff0c;如果是 DVD 光盤安裝&#xff0c;可以僅…

回顧:中網通訊網絡公司CEO羅與曾作客新浪嘉賓聊天室

轉載鏈接&#xff1a;http://tech.sina.com.cn/it/w/2001-11-09/91253.shtml 回顧&#xff1a;中網通訊網絡公司CEO羅與曾作客新浪嘉賓聊天室 大家好&#xff01;   主持人 &#xff1a;各位網友&#xff0c;下午好&#xff0c;今天我們請到了中網通訊網絡公司首席執行官羅…

form——驗證器Validators

form表單最大的作用就是驗證功能了&#xff0c;通過cleaned_data清洗&#xff0c;我們可以獲取傳來的值&#xff0c;通過參數、驗證器、自定義驗證方法&#xff0c;我們可以做到很多的驗證。 驗證器可用于在不同類型的字段之間重用驗證邏輯。validators有自帶的驗證器&#xff…

若川知乎問答:做前端感覺很吃力怎么辦?

前些日&#xff0c;我發了一篇推文《做前端感到越來越吃力了&#xff01;怎么辦&#xff1f;》&#xff0c;雖然是推廣&#xff0c;但閱讀量卻很高&#xff0c;推廣標題我們大概率不能改&#xff0c;感覺騙了大家&#xff0c;掉粉挺多人。寫稿的人可能就是看到了知乎這個問答。…

惠新宸php教程_惠新宸:首位國人加入PHP語言官方開發組

PHP開發組終于有了國人參與。最近&#xff0c; Laruence(真名惠新宸)加入了PHP語言官方開發組。 做PHP的同學一定很熟悉他了&#xff0c;他的博客風雪之隅(https://www.laruence.com/)發表了很多PHP源代碼分析和擴展開發相關的文章。他使用PHP擴展開發的PHP框架Yaf&#xff0c;…

d3 制作條形圖_停止制作常見的壞條形圖的5個簡單技巧

d3 制作條形圖Bar charts were probably the first type of chart you were ever introduced to in first grade. Their simplicity makes them a standard in visualizing data, but it is its accessibility that leads visualizers to often be careless with bar charts.乙…

SVN之使用原則

以下是我起草的部門SVN規范里原則的一部分。文件提交時要求必須提交注釋&#xff0c;注明相關修改信息&#xff0c;例如bug號、任務描述等。具體內容可采用約定或者設置的形式。你所提交的改變將體現給其他開發者&#xff0c;要明白提交的后果&#xff0c;提交之前要慎重。代碼…