透過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}”

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



<!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="{'is-invalid':!remain}" class="form-control"
@input="check" v-model="message"></textarea>
<div class="text-sm-right">
<i>字數限制：{{limit}}</i>
<i>剩餘字數：{{remain}}/ {{limit}}</i>
</div>
</div>
</div>
<div class="row">
<div class="col">
<p>{{ message }}</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
app = new Vue({
el: "#app",
data: {
message: "這是一個APP",
limit: 50,
},
computed: {
remain() {
return this.limit - this.message.length
}
},
methods: {
check() {
if (this.remain < 0) {
this.message = this.message.substr(0, this.limit)
};
}
},
});
</script>
</body>
</html>
view raw Limit characters hosted with ❤ by GitHub

留言

張貼留言

這個網誌中的熱門文章

用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基礎篇--迴圈 For Loops and While Loops

-
圖片
Python的主要迴圈指令有二，分別是For迴圈與While迴圈。兩者的差別在於while迴圈不會預設重複的次數，也就是說如果使用while迴圈時，可以無限次的重複。如果預先知道需要重複多少次的話，使用For迴圈會比較恰當。 For迴圈(For loops) 如果預先知道需要重複多少次的話，採用for迴圈是比較洽當的。他的語法如下： for 變數 in 串列： 程式區塊 例如下面的例子。其中ｉ是變數，mylist是串列 ，而程式區塊的內容則是 print(i)。 mylist = [1,2,3,4,5] for i in mylist: print(i) 上面的程式碼執行後，電腦會陸續的將mylist串列的內容印出來，就像下面一樣。 當一切元素都處理完畢後，就會結束for迴圈。 另外，也可以使用range()來設定迴圈的執行次數，其語法如下： for 變數名稱 in range(重複次數):   重複執行的程式 巢狀迴圈 for迴圈也可以放在另外一個for迴圈裡面，這樣就成為所謂的巢狀迴圈。巢狀迴圈的執行次數是各層迴圈的乗績。 利用這個特性，我們可以透過巢狀迴圈製作九九乘法表。 for x in range ( 1 , 10 ): for y in range ( 1 , 10 ): product = x * y print ( "%d x %d =%d" %(x , y , product) , end = "" ) print () While 迴圈（While Loops） 如果條件符合的話，程式區塊就會被執行。反之，若條件不符合時，就結束迴圈繼續執行迴圈後面的程式碼。也就是說while迴圈會在條件為True的狀況下，重複執行內部的程式區塊內容。while迴圈通常沒有固定執行的次數，語法如下： while 條件:     程式區塊 下面的例子。條件是 n <3 ，程式區塊的內容是：print("name") n = 0 while n < 3 print ( "name" ) 需要特別注意...
閱讀完整內容

Vue Component 元件初探

-
圖片
什麼是元件？ 一般來說，當我們製作一個網頁時，可以將網頁拆解成一個一個的區塊。這個由各種區塊組成的網頁，除了中間的主內容區之外，還包含了頁首、頁尾、側欄等區塊。每個區塊都有對應該區塊所需要執行的javascript程式碼與CSS檔案。在開發網頁時，如果將這些程式碼全部寫在一起，會導致整個專案的程式碼冗長，檔案也變得很肥大。 試想，若把網頁部分的區塊取出來獨立成一個個的元件，並且將重複用到元件拿來重複使用的話，是否就可以減低程式碼冗長的狀況？Vue元件的出現，就是解決這樣的問題。 為什麼使用元件？ Vue元件（Vue Component）可以說是 Vue JS 最核心的功能。Vue元件可以加強重用性，讓一些常用的程式碼，例如控制項程式，可以被重複使用。你可以把元件想像成樂高積木，一塊塊小程式元件像積木一樣的組合成一個完整的系統。 以上面這個網頁來說，我們可以把Header、Footer、Content、Aside等拆分出來，成為個別的元件，並且在Aside裡面放置Item子元件。透過這樣的設計，可簡化程式碼讓程式更小，並且每個元件可以被多次呼叫使用。整個程式碼看起來更具備組織性、更容易被維護。可以達到DRY Code的效果。 如何使用元件？ 使用元件有兩個步驟：註冊與安裝『Register first and install later』。元件需要註冊才可以使用。註冊有兩種方式，分為全域註冊與區域註冊兩種。經過全域註冊的元件是為全域元件（Global Component ），經過區域註冊的元件是為區域元件（ Local Component）。兩者的差別是，全域元件可以被「所有的」vue 實例使用，而區域元件只能在其所在vue 實例的作用範圍內有效使用。此外，也可以使元件成為巢狀結構，在元件中再註冊元件。以下是全域註冊與區域註冊的註冊方式： 全域註冊 (Registration) 使用Vue.component(tagName, options)來註冊一個元件。第一個是元件的名稱，它必須是小寫，第二個參數是JSON物件。JSON物件通常會放下面四種屬性： props data methods computed 另外要注意的是，元件的註冊必須在Vue實例初始化前完成。而且Vue.component 的...
閱讀完整內容