Axure基礎教程02——文本框

6 評論 40498 瀏覽 16 收藏 6 分鐘

上次給大家介紹過矩形,這次說一下文本框。

順便要說一下的是,這個系列教程里面,有些部件比如占位符之類就不再贅述了,因為比較簡單而且沒有什么需要特別設置的功能。

文本框其實也是個挺簡單的部件,本身能變化的不多,一些比較復雜的功能,比如本來有“請輸入XX”字樣點擊后就消失的,需要用到條件判斷等,這些我們以后講實際例子的時候再專門講怎么做。

一、文本框基礎功能:

文本框的部件屬性設置就不多說了,這一塊希望大家都學會自己看看,比較是很基礎的東西,會用word的基本上也就會了。

不知道大家開始習慣在各個部件上點擊右鍵看看編輯菜單沒,這次主要說的就是編輯菜單里面的東西:

1、限定輸入字數:

文本框是可以限制里面輸入的字數的,效果就是當輸入的文字超過字數后,就無法輸入了。在文本框上點右鍵——編輯文本字段——編輯最大長度,就會出來個輸入框要求我們輸入限制的字數。

輸入了限制數量后,生成的頁面里面就會限制到對應的字數,比如限制5個字,就只能輸入5個字,不區分中文、英文字母、數字以及符號。不過這里要注意的是,如果設置了限制數量,是沒法取消的,比如我們設置了限制5個字,后面要改的話,就只能重新設置,axure里面并沒有相關的取消操作,當然也可以把輸入框刪掉然后使用一個新的。

2、隱藏文本/非隱藏文本:

還是點右鍵——編輯文本字段(后面就不提這個操作了,這次說的功能全部在這里),選擇”隱藏文本“的話,就會變成我們常見的密碼框的樣式,不管輸入什么文字都會用一個黑色圓點代替,如下圖所示:


如果要取消隱藏,就選擇”非隱藏文本“就可以了,文本框默認是”非隱藏文本“模式。

3、顯示/隱藏邊框:

輸入框默認是顯示邊框的,我們可以選擇隱藏掉,如下圖所示。當隱藏之后看起來就有點像一個普通的文本,但是生成頁面原型后是可以進行文字輸入的。

4、設置只讀/非只讀:

axure對于文本框還有個很奇怪的設置,就是可以把文本框設置為只讀狀態,這樣就無法編輯里面的文字了(文本框為啥不讓編輯啊….),具體效果請看例子。

5、分配提交按鈕:

這個功能光看上面的字眼可能比較難理解,但是實際作用其實我們經常遇到,比如我們經常在各種登錄界面時,在輸入框輸入完直接按回車,就會直接登錄,相當于點擊”登錄“按鈕。

這個”分配提交按鈕“的功能就是如此,當我們設置這個選項時,會讓我們選擇某個按鈕(或是矩形),當在對應的輸入框里面點擊回車時,就相當于點擊了之前選擇好的那個按鈕。在作者的例子里面,是有個”跳轉到頁面2“的按鈕(下圖中的那個),已經設置好交互。在上面的輸入框里面輸入回車鍵,就相當于點擊了按鈕,讀者嘗試一下就能理解了。

二、文本框的交互功能:

文本框的交互設置有四個,點擊時、鍵盤輸入時、獲取焦點時以及失去焦點時,暫時沒發現有特別要注意的地方,作者平時練習的時候會常常忽略”獲取焦點“這一項,因為當我們點擊輸入框的時候,就已經是”獲取焦點“狀態了,所以…..

好了這次就先介紹到這里,下次繼續介紹其他部件,敬請期待。

前面提到的功能設置例子:點擊下載

作者微博求粉:@少爺熙的一些事一些情,歡迎關注哦,有問題也可以直接私信詢問

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 不錯,學習了

    來自廣東 回復
  2. 此限制文字方法只適用于單行文本框

    來自湖南 回復
  3. ?? 收藏繼續看

    來自廣東 回復
  4. 不錯的實用教程,推薦

    來自北京 回復
  5. 來自四川 回復
  6. 來自四川 回復