透過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）執行一次，結果： 這樣子就正確了。如此，整個分級制度的邏輯就完成了。
閱讀完整內容

如何利用Python實現攝氏轉華氏的溫度轉換

-
圖片
編寫程式的目的就是為了解決問題，因此，在開始設計程式之前，先暸解問題是很重要的。 開始寫程式之前要先暸解以下幾件事： 待解決的問題其具體內容是什麼？ 使用者為何？ 要處理的資料類型是什麼？放在哪裡？ 資料要如何輸入電腦？ 要如何處理資料？ 資料處理完畢後，要如何呈現？ 處理完畢的資料需要儲存嗎？如果要儲存，需要放在哪裡？ 既然已經暸解問題了，接下來透過程式處理的方法與處理的順序又是什麼呢？ 這時候可以利用流程圖來分析。不過，在畫圖之前需要先把程式處理的方式依照邏輯的順序與步驟一個一個地寫下來。 把程式運作的主要流程列出來之後，再透過流程圖來表示出來。 這個程式其實網路上到處都有可以使用的 線上轉換器 ，在這裡我們只是想要透過Python這個程式語言來看看，是否也可以實現，也算是一個牛刀小試。 我們希望：使用者輸入攝氏溫度後，可以得到相對應的華氏溫度。 思考方式： 關於這個問題要如何解呢？首先應該要問的是，如果是徒手轉換這兩個數值的話，該如何進行？ 為了解答這個問題，首先我們先找出攝氏轉華氏的公式。 以下是 維基百科 上面的說明： 可以看出攝氏轉華氏的公式是： F = C x 9/5 + 32 整個流程是下面這樣。 分析完畢之後，我們就可以開始寫程式了。 程式碼說明： 先印出說明， 提示使用者輸入攝氏溫度，並且移除輸入字串頭尾多餘的空白 帶入攝氏轉華氏公式，並將結果指定為F 印出轉換的結果（華氏溫度） 其中： print() 函數： python保留字 ，可以印出想要的結果。 int(C): 透過 int() 函數，把Ｃ轉換為整數（integer） strip()方法：用來移除字串頭尾指定的字元（預設為空格）或字元序列。 format()格式化函數：用來格式化字串 其實，要實現攝氏轉華氏不只有上面的方式，你也可以把程式改寫成函式的方式來獲取答案： 如果將上面的程式加上while迴圈，程式就會不斷的幫你轉換數值。 在迴圈中加入停止控制選項，只要按下q，就可以停止程式的執行。
閱讀完整內容

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檔案連結 ...
閱讀完整內容