透過Vue實現限制數入字數

-
我們都知道，平常在社群網站上會限制使用者輸入的字數。最具代表性的網站就是Twitter，Twitter限制一般使用者每次發表文章的字數在140字以內。讓使用者用最簡短的文字來表達想法。對於優化使用者體驗比較好的方式是，當使用者在輸入的同時，提示使用者還有多少字可以輸入，當使用這輸入的字數達到限制時，及時地停止使用者繼續輸入。

像這樣子限制使用者輸入字數的機制要如何來實現呢？

有兩的點需要注意：

  1. 如何計算使用者輸入了多少字？
  2. 當使用這輸入的字數達到限制時，該如何停止繼續輸入？

今天我們就要透過Vue.js來製作一個可以幫我們控制輸入字數的程式。首先，我們先準備好需要的HTML檔案。

<!DOCTYPE html>
<html lang=“zh-TW”>
<head>
    <meta charset=“UTF-8” />
    <meta name=“viewport” content=“width=device-width, initial-scale=1.0” />
    <meta http-equiv=“X-UA-Compatible” content=“ie=edge” />
    <link rel=“stylesheet” href=“https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css”
        integrity=“sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO” crossorigin=“anonymous” />
    <title>Start</title>
</head>
<body>
    <div id=“app” class=“container”>
        <div class=“row”>
            <div class=“col”>
                <textarea cols=“30” rows=“5” type=“text” class=“form-control” placeholder=“輸入文字”></textarea>
                <div class=“text-sm-right”>
                    <i>字數限制：50</i>
                    <i>剩餘字數：1/ 50</i>
                </div>
            </div>
        </div>
        <div class=“row”>
            <div class=“col”>
                <p>顯示文字</p>
            </div>
        </div>
    </div>
</body>
</html>

接下來，將vue.js加入檔案中。

<script src=“https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>

建立Vue實例。
 <script>
      app = new Vue({
        el: "#app",
        data: {
          message: "這是一個APP",
        },
      });
    </script>

如此，就已經完成了一個Vue的檔案。

message的內容要顯示在html上面我們預先選好的位置。也就是<p>顯示文字</p>這個地方，要把它替換成<p>{{ message }}</p>。如此data裡面的message: "這是一個APP”就會將『這是一個APP』顯示到<p></p>裡面。你會看到html上面的結果是：
<p>這是一個APP</p>

計算使用者輸入字數

由於我們想要限制使用者輸入的字數，必須先知道使用者已經輸入了多少字。
在 JavaScript 中想要判斷字串長度可以使用 length 來取得，如果要知道使用者輸入的字串長度到底多長，可以使用length來取得字數：
message.length
上面的式子可以得到message這字串的長度，也就是到底有多少字組成message這個字串。

限制使用者輸入字數

另一個是，當使用者超過輸入的限制時，要如何裁切掉多出來的部分？
有幾種解決方案可以採用。我們可以直接disable掉 input欄位讓input失效，或者是停止接收多出來的資料。這裡的實作範例採取第二種解決方案。

如果是想要用第二種方式解決的話，可以使用substring來裁切。JavaScript substring 可以在字串中擷取出設定好範圍的其中一段字串，substr() 有兩個參數，第一個參數arg1是開始擷取的位置，第二個arg2是結束擷取的位置，也就是你想要擷取的字數數量。arg1與arg2決定了取出來的字串範圍。你可以自己設定擷取範圍，但參數不可以是負數，且不可以是兩個相同的數字，否則會行成空字串。
substr(arg1,arg2)
如下表示，對message這字串，從0這個位置開始（也就是最開頭的位置）裁切到10的地方。
message.substr(0, 10)

實作

我們現在就利用這個方式計算一下使用者的輸入字數

1. 先雙向綁定message與<textarea>的值


我們改造一下下面的textarea標籤：
< textarea cols=“30” rows=“5” type=“text” class=“form-control” placeholder=“ 輸入文字 ”>< / textarea >

移除placeholder，加上v-model=“message”
< textarea cols=“30” rows=“5” type=“text” class=“form-control” v-model=“message”>< / textarea >


2.計算字數

我們預計將字數限制與剩餘字數顯示在下面區塊，
我們設定兩個變數，要限制的字數用limit變數表示，剩餘字數則用remain表示。limit變數是一個固定值，由我們事先決定，可以寫在data中。remain則是透過使用者輸入的字數與limit變數相減而計算出來的結果，我們需要透過computed來計算。
<div class=“text-sm-right”>
       <i>字數限制：50</i>
       <i>剩餘字數：1/ 50</i>
</div>
可以改成： 
<div class=“text-sm-right”>
      <i>字數限制：{{ limit }}</i>
      <i>剩餘字數：{{ remain }}/ {{ limit }}</i>
</div>

並且在data中加入limit變數的初始值，並且設定為50。
data: {
          Message: “這是一個ＡＰＰ”,
          limit: 50
        },


透過前面提到的方式，在computed中計算remain的值。
this.limit - this.message.length 其中 this.limit 為限制的字數，this.message.length 為使用者輸入的字數。

computed: {
   remain() {
       return this.limit - this.message.length;
    }
 },

3.設置限制使用者輸入字數機制

接下來製作一個check方法，一旦使用者輸入完畢的時候，就啟動check方法檢查字數。在< textarea >加上v-on:input，當input完畢，啟動vi-on，呼叫check方法。
下面是HTML部分的修改：
< textarea cols=“30” rows=“5” type=“text” class=“form-control” v-on:input=“check” v-model=“message”>< / textarea >

下面是javascript的部分，加上check() ，並且透過前面說的加上this.message.substr(0, 10) ，如此使用者只能輸入10個字串。如果超過10個字，就會因為 this.message = this.message.substr(0, 10)而只接受10個數字：
<script>
        app = new Vue({
            el: “#app",
            data: {
                message: “這“一個APP”,”            },
            methods: {
                check() {
                    this.message = this.message.substr(0, 10)
                }
            },
        });
    </script>

我們把10換成limit變數，
message.substr(0, this.limit) 就表示從0這個位置開始裁切到 limit變數設定的字數，由於data中的limit被設定為50，因此我們可以輸入50個字，如果想要增加或者減少字數，只需要在limit變數的地方修改數值就可以。如此式子就比上面更有彈性。
 methods: {
     check() {
          this.message = this.message.substr(0, this.limit)
      }
  },

到目前為止，基本的功能已經具備。我們可以再加上判斷式優化一下程式碼。

 methods: {
   check() {
     if (this.remain < 0) {
        this.message = this.message.substr(0, this.limit)
      };
    }
 },
加上CSS效果，警告使用者已經達到輸入上限。由於我們使用Bootstrap4，所以可以使用 .is-invalid 來切換效果Forms · Bootstrap 當remain為false的時候，就會綁定.is-invalid 
v-bind:class=“{‘is-invalid’:!remain}”

大功告成，下面是完整的程式碼。




留言

張貼留言

這個網誌中的熱門文章

用Python的條件實現電影分級流程

-
圖片
電影分級流程 電影的分級制度大家應該都不算陌生吧。就目前 台灣的現行分級制度 來說可以分為五級。分為 普遍級：一般觀眾皆可觀賞 保護級：未滿6歲之兒童不宜觀賞，6歲以上未滿12歲之兒童需父母、師長或成年親友陪伴觀賞。 輔12級：未滿12歲之兒童不宜觀賞。 輔15級：未滿15歲之人不宜觀賞。 限制級：未滿18歲之人不宜觀賞。 五種。 我們現在透過 Python的控制流程 來逐步思考這個問題吧。 首先，先處理限制級的問題。限制級的條件是未滿18歲之人不得觀賞限制級電影。 如果把它轉換成邏輯陳述，就可以變成『假如年齡小於18歲，不得觀賞『限制級』電影 。但可以觀賞其他級數電影--『普遍級』、『保護級』、『輔12級』與『輔15級』電影』 程式可以寫成如下的式子： 假設我們輸入15歲（age = 15）的話，執行結果如下： 假設我們輸入30歲（age = 30）的話，執行結果如下： 什麼訊息都沒有。 接下來我們來優化一下程式碼，在條件不符合的時候給他一些提示訊息。運用ELSE就可以表達「條件不符合時的狀況」。 程式可以改寫成如下的式子： 我們再次輸入30歲（age = 30），執行結果如下： 出現「可以觀賞任何電影」的訊息了。 接下來，我們輸入15歲輔導級的條件。 接者繼續輸入12歲輔導級與保護級的條件。 輸入完畢後我們測試一下，先輸入5歲（age = 5），執行結果如下： 怎麼與我們期待的結果不同？我們希望它落入age < 6 區段的陳述子句，卻落到 age < 18區段了。 主要的原因前面有說過，ELIF陳述句的順序非常重要，由於該陳述句中，一旦找到符合條件的子句，其他剩下的子句都會跳過。目前的狀況就是它找到 age < 18符合條件之後，就跳過後面所有的陳述子句了。因此，我們必須調整上面程式的順序： 調整後再輸入5歲（age = 5）執行一次，結果： 這樣子就正確了。如此，整個分級制度的邏輯就完成了。
閱讀完整內容

Vue元件實作，將HTML網頁Vue元件化

-
圖片
將HTML網頁Vue元件化 前一篇簡單的介紹了 元件的基本常識 。這篇我們要來試試看，實際上如何做出元件化的網頁。 第一個例子，我們要透過bootstrap網站上面的html範例，逐步將它改成Vue元件的頁面。 今天我們要練習的畫面，大家可以在這裡取得，下載為html檔案。下載html的方法這裡就不贅述。 https://getbootstrap.com/docs/4.1/examples/ 分析頁面 首先，我們先分析一下這個bootstrap的html範例 有頁首、頁尾、且中間主畫面可以分成兩個區塊。 下面區塊可以再分成更細的區塊，總共有六個區塊構成。 我們可以把分析的結果畫成下面的圖表。 網頁可以分割成Header、Footer、主要內容三段。主要內容的部分可以分上下，上面是bigBoard下面是一個個Item組成，總共有六個Item。 再回來對應下載的html原始碼。我們發現： Header 區塊，從 <header> 開始到 </header> 結束。 Footer 區塊，從 <footer class="text-muted"> 開始到 </footer> 結束。 主要內容區塊，從 <main role="main"> 開始到 </main> 結束。 主要內容區塊，又可以分成兩段，上半段從 <section class="jumbotron text-center"> 開始，到 </section> 結束; 下半段從 <div class="album py-5 bg-light"> 開始，到 </div> 結束，裡面有六個Item，每個Item都從。 <div class="col-md-4"> 開始，到 </div> 結束。 建立Vue 依照上面的分割方式，我們可以將整個網站分成幾個Vue元件。在分割之前，我們先在頁面上安裝Vue.js。一樣，我們先插入下面兩個部分。 Vue.js的CDN檔案連結
閱讀完整內容

Python基礎篇--[條件]如果發生這種狀況時，我該怎麼辦？

-
圖片
日常生活中隨處可見的選擇邏輯 一個夏日的中午，行經便利商店，看到冰櫃裡一瓶瓶冰涼的飲料，感覺喝下去會很解渴，於是你走了進去，打開冰櫃拿出一罐售價25圓的可樂。正要掏出皮包裡的悠遊卡購買時，發現悠遊卡內儲值的額度只剩5元。於是你檢查皮包中看看有沒有現金。結果發現有一張ㄧ百元，於是你拿出那張一百元給店員。像這樣子的情形你應該不陌生吧？這是日常生活常見的場景，可以說在我們人生中就是會不斷的面臨各種大大小小的選擇。 我們常常會說，如果碰到狀況A，就做AA這件事；如果碰到狀況B，就做BB這件事；如果既不是A也不是B的話，就去做CC這件事。如果我們用這樣子的邏輯來敘述上面的場景的話，就會變成： 如果悠遊卡的儲值大於可樂的售價(25元)，就用悠遊卡付款。 如果悠遊卡的儲值小於可樂的售價(25元)，尋找皮包是否有現金。 如果皮包有現金，而且現金大於可樂的售價(25元)，就用現金付款。 如果皮包沒有現金或現金小於可樂的售價(25元)，就不買可樂 if/else流程控制 我們知道Python 執行是從最頂端第一行開始，然後循序向下逐條執行。 但是，並不是所有程式都是由上而下循序的執行，如果程式中有流程控制的陳述句子時，可能會依據條件跳過某些程式碼，也可能跳過整個區塊的子句不執行。 簡單說，流程控制就是「程式按照當時狀況、分別執行不同處理動作的功能」。在表示方式上面，我們會使用 if、else 、elif等方式表示他們之間的關係。 IF陳述句 IF 用中文解釋就是指「如果」的意思。在流程圖中使用菱形來表示，表示程式要做出的實際決定。 如果條件為True時會執行子句，條件為False時子句會跳過不執行。 例如：「如果悠遊卡的儲值大於可樂的售價(25元)，就用悠遊卡付款。」如果用Python表示就會像這樣： 程式碼 if 悠遊卡的儲值 >=25： 使用悠遊卡付款 所有流程控制陳述句都是以冒號結尾，並在後面跟著一個新的程式區塊，也就是陳述子句。以上述的例子來說，陳述句是：『悠遊卡的儲值 >=25』，陳述子句是『使用悠遊卡付款』 程式碼 if 陳述條件成立： 執行這行陳述子句程式 需要特別注意的是，上面的語法中，tab的地方可以採
閱讀完整內容