JS处理文本框只能输入中文、英文、数字，防止SQL特殊字符注入(解决MAC中文输入法下会取得拼音的值的问题)

最新推荐文章于 2023-03-17 15:41:55 发布

原创最新推荐文章于 2023-03-17 15:41:55 发布 · 590 阅读

0 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

15 篇文章

订阅专栏

该博客介绍了如何使用JavaScript来限制文本框的输入，确保只能输入中文、英文和数字，从而防止可能的SQL特殊字符注入问题，特别是解决了在MAC中文输入法下可能会输入拼音的值的问题。

控制文本框只能输入中文、英文、数字

<input onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" onpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" oncontextmenu = "value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')">


改进方法（解决MAC中文输入法下会取得拼音的值的问题）：
控制文本框只能输入中文、英文、数字和个别特殊字符包括# _ @ ! 
<input name="Owner" id="Owner" type="text"  class="user_input" placeholder="请输入用户名" maxlength="16" autocomplete="off" onpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5#_@!]/g,'')" oncontextmenu="return false" />

<input name="address" id="address" type="text"  class="user_input" placeholder="请输入位置" maxlength="16" autocomplete="off"  onpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5#_@!]/g,'')" oncontextmenu="return false" />
```javascript
//解决苹果MAC中文输入法下会取得拼音的值的问题
var isInputZh = false;
var isInputZh2 = false;
var search1 = document.getElementById('Owner');
var search2 = document.getElementById('address');
search1.addEventListener('compositionstart', function (e) {
  isInputZh = true;
}, false);
search1.addEventListener('compositionend', function (e) {
  isInputZh = false;
}, false);
search1.addEventListener('input', function (e) {
  if(isInputZh) return;
  var value = this.value;
  switch_input1(value);
}, false);


search2.addEventListener('compositionstart', function (e) {
  isInputZh2 = true;
}, false);
search2.addEventListener('compositionend', function (e) {
  isInputZh2 = false;
}, false);
search2.addEventListener('input', function (e) {
  if(isInputZh2) return;
  var value = this.value;
  switch_input2(value);
}, false);

function switch_input1(value){
	value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5#_@!]/g,'');
	search1.value=value;
}

function switch_input2(value){
	value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5#_@!]/g,'');
	search2.value=value;
}