透過Vue實現限制數入字數
我們都知道,平常在社群網站上會限制使用者輸入的字數。最具代表性的網站就是Twitter,Twitter限制一般使用者每次發表文章的字數在140字以內。讓使用者用最簡短的文字來表達想法。對於優化使用者體驗比較好的方式是,當使用者在輸入的同時,提示使用者還有多少字可以輸入,當使用這輸入的字數達到限制時,及時地停止使用者繼續輸入。 像這樣子限制使用者輸入字數的機制要如何來實現呢? 有兩的點需要注意: 如何計算使用者輸入了多少字? 當使用這輸入的字數達到限制時,該如何停止繼續輸入? 今天我們就要透過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” ...
請問如果使用者可以先選擇溫度轉換方式,然後再輸入一個溫度,可以轉換成另一溫度,請問你會怎麼寫呢?謝謝!
回覆刪除您好,
刪除請看下面原始碼。
https://gist.github.com/seaniap/5f1c0e4b8d46dfdc342aae5bbb4c8db0
歡迎討論
Sean Yeh您好,
刪除謝謝回覆。
真的很感謝您提供的解答。
但有兩個地方有些疑問,
1.請問第7行,whatConvert = "1",這裡寫這個的用意?
2.如果12行與16行不加上.strip()),是否也可以?
謝謝!
謝謝您的提醒。
刪除本來我想設定一個預設的狀態,所以第7行預先指定了1的選項。不過,似乎不寫也不影響。
另外,12行與16行加上.strip()的目的是為了防呆,避免使用者輸入不必要的空白,如果確定不會的話,不寫.strip()程式也是可以跑的。