JS小Demo實戰之今天外賣點什麼？（三）

在JS小Demo實戰之今天外賣點什麼？（二）裏面添加了判斷輸入框不能爲空的功能。

總感覺輸入框還是缺點什麼。最近突然想到了，輸入的值不應該有空格。不然會很不美觀。

去除空格

雖然在將innerHTMl轉化爲li內的值的時候會自動去除innerHTML值前方的空格，而且還會把中間所有的空格變成一個空格。

就像這樣，

後面的空格雖然看不出了，但是可以在代碼行裏測試一下，比如說加一句

oLi.innerHTML=oLi.innerHTML+'aaa';

結果就是這樣的。

還是可以看出，麥當勞和aaa直接有一個明顯的空格。

這是因爲，在HTML結構裏，空格的符號是 所以再多的空格，也就只變成了一個空格了。

言歸正傳，目的是去除輸出框的所有空格，所以需要用的str的replace方法。

而且因爲要匹配所以的空格，所以還要用到正則表達式，其實也很簡單。

oLi.innerHTML=oLi.innerHTML.replace(/\s/ig,'');

只需要在全局匹配空格，然後替換成空字符就行了。

清除輸入框

如果輸入框在點擊加入按鈕之後，還需要在手動刪除，那麼就有點不人性化了，所以還有在點擊完按鈕之後，將輸入框原來的數據清除。

也不是特別麻煩，就是一行代碼的事，在if選擇之外加，

oTxt.value=null;

這樣在輸入結束之後，輸入框就變成空白，就不用手從刪除了。

至此，輸入框的折騰就差不多了，最後再次附上網址。

歡迎大家拍磚指正，提出建議。

http://yangzhedi.github.io/takeout.html