input輸入框自動消除空格 版權 今天遇到了一個問題,用戶在在前端的input里面輸入id的時候，多寫了個空格,數據庫里面就找不到id了，所以無法獲取輸入的id所綁定的標簽位置在哪里，現在需要在前端做一個處理，input框輸入的數值里面，會自動消除空格。 代碼示例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="modal-body form"> <div class="form-group"> <label class="col-sm-2 control-label" >資產編號<span class="required"> * </span></label> <div class="col-sm-6"> <input type="text" class="form-control" id="assetId" onkeyup="this.value=this.value.replace(/[, ]/g,'')"></input> </div> </div> </div> </body> </html> 這段代碼的作用： onkeyup="this.value=this.value.replace(/[, ]/g,'')" 1：在input框里面輸入編號的過程中，出現空格，自動消除 2：input首尾出現空格，自動消除 3：復制粘貼的文本里面出現空格，自動消除
/** * 去除空格 */ export function trim(str) { var result; if(str){ // result = str.replace(/(^\s+)|(\s+$)/g,""); 去除字符串前后空格 result = str.replace(/\s/g,""); // 去除字符串全部空格 } return result?result:''; }
<span style="font-family: Arial, Helvetica, sans-serif;"><input type="password" name="password" id="password" onkeydown="return banInputSapce(event);" onKeyup="return inputSapceTrim(event,this);" /></span> 復制代碼代碼如下: /** * 是否去除所有空格 * @param str * @param is_global 如果為g或者G去除所有的 * @returns */ function Trim(str,is_global) { var result; result = str.replace(/(^\s+)|(\s+$)/g,""); if(is_global.toLowerCase()=="g") { result = result.replace(/\s/g,""); } return result; } 復制代碼代碼如下: /** * 空格輸入去除 * @param e * @returns {Boolean} */ function inputSapceTrim(e,this_temp) { this_temp.value = Trim(this_temp.value,"g"); var keynum; if(window.event) // IE { keynum = e.keyCode } else if(e.which) // Netscape/Firefox/Opera { keynum = e.which } if(keynum == 32){ return false; } return true; } 復制代碼代碼如下: /** * 禁止空格輸入 * @param e * @returns {Boolean} */ function banInputSapce(e) { var keynum; if(window.event) // IE { keynum = e.keyCode } else if(e.which) // Netscape/Firefox/Opera { keynum = e.which } if(keynum == 32){ return false; } return true; }
原文作者：祈澈姑娘 技術博客：https://www.jianshu.com/u/05f416aefbe1 90后前端妹子，愛編程，愛運營，文藝與代碼齊飛，魅力與智慧共存的程序媛一枚。 堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見 ———————————————— 版權聲明：本文為CSDN博主「祈澈菇涼」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。 原文鏈接：https://blog.csdn.net/qq_36538012/article/details/89985117