javascript
IFE JavaScript Task0002-1 小练习1：处理用户输入
對自己最近做的一些小練習進行總結吧，鞏固下記憶；
IFE JavaScript Task0002-1 小練習1：處理用戶輸入
第一階段
在頁面中，有一個單行輸入框，一個按鈕，輸入框中用來輸入用戶的興趣愛好，允許用戶用半角逗號來作為不同愛好的分隔。
當點擊按鈕時，把用戶輸入的興趣愛好，按照上面所說的分隔符分開后保存到一個數組，過濾掉空的、重復的愛好，在按鈕下方創建一個段落顯示處理后的愛好。
思路：創建一個數組保存數據；其中用array.split方法，以(",")為分割號作為數組元素的分割；
去掉數組里重復與空的元素；方法有很多，我這里用的是indexOf方法，先建立一個新數組；然后把這個數組的元素與之前保存用戶數據的數組進行對比，如果找不到并且值不為空，那就把此時元素存進新的數組里；進行去重和過濾；
（其實也想過用filter方法，但是顯示錯誤用不了，等以后再完善下）
第二階段
單行變成多行輸入框，一個按鈕，輸入框中用來輸入用戶的興趣愛好，允許用戶用換行、空格（全角/半角）、逗號（全角/半角）、頓號、分號來作為不同愛好的分隔。
思路：這個將分隔符號變為正則進行檢測就好了；
第三階段
用戶輸入的愛好數量不能超過10個，也不能什么都不輸入。當發生異常時，在按鈕上方顯示一段紅色的錯誤提示文字，并且不繼續執行后面的行為；當輸入正確時，提示文字消失。
同時，當點擊按鈕時，不再是輸出到一個段落，而是每一個愛好輸出成為一個checkbox，愛好內容作為checkbox的label。
思路：先在去重前進行判斷，超過就顯示錯誤提示；
然后最后對處理好的數據用innerHTML輸出；
?
代碼如下：
1 <body> 2 <textarea type="text" class="hobby"cols="45" rows="10"></textarea> <button class="hobby-btn">確定</button> 3 <p style="display: none;color: red" class="error">輸入的愛好數量不能超過10個，并且不能為空</p> 4 <form class="textshow"></form> 5 </body> 6 <script> 7 var hobbybtn=document.querySelector(".hobby-btn"); 8 var show=document.querySelector(".textshow"); 9 var erorrtirp=document.querySelector(".error"); 10 hobbybtn.οnclick=function(){ 11 var hobbyText=document.querySelector(".hobby").value.trim(); 12 var hobbyArray=hobbyText.split(/\n|\s+|\,|\，|\、|\;|\；/); 13 var resultarr=[];//去重后的數組 14 if(hobbyArray.length>10||hobbyText===""){ 15 erorrtirp.style.display="block"; 16 } 17 else{ 18 erorrtirp.style.display="none"; 19 for(var i=0;i<hobbyArray.length;i++){ 20 if(resultarr.indexOf(hobbyArray[i])===-1&&hobbyArray[i]!==""){ 21 resultarr.push(hobbyArray[i]); 22 } 23 } 24 for(var j=0;j<resultarr.length;j++){ 25 show.innerHTML+= "<label>" + "<input type='checkbox'>" + resultarr[j] + "</label>" 26 } 27 } 28 29 30 31 32 /*function check(item) { 33 34 for(var i=0;i<hobbyArray.length;i++){ 35 if(item!==hobbyArray[i]){ 36 return item 37 } 38 } 39 } 40 41 var newarry=hobbyArray.filter(check(item));*/ 42 43 } 44 45 </script>?
轉載于:https://www.cnblogs.com/spezz07/p/5819954.html
總結
以上是生活随笔為你收集整理的IFE JavaScript Task0002-1 小练习1：处理用户输入的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SQL基础篇---函数及其函数配套使用的
- 下一篇： window之hosts