JavaScript 常用代码段（一）

这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战

1. 去除字符串左右两边的空格

<h2>测试去除字符串左右两边空格</h2>
<input type="text" id="strs" value="       需要过滤空格">
<input type="button" id="rstrsBtn" value=" 过滤 ">

<script>
window.onload = function () {
  var _rstrsBtn = document.getElementById("rstrsBtn"),
      _strs = document.getElementById("strs");

  _rstrsBtn.onclick = function () {
    _strs.value = _strs.value.replace(/^(\s|\u00A0)+|(\s|\u00A0)+$/g, "");
  }
};
</script>

• replace() 是 JavaScript 原生函数，正则 /^(\s|\u00A0)+|(\s|\u00A0)+$/g 是关键部分，\s 是用来匹配任何空白字符；

2. 验证用户是否输入

表单中经常有些必填项。例如在注册用户时，必须填写用户名才能提交注册信息。验证用户是否输入时，通常需要先过滤再验证

function (chars) {
  return !chars ? true : false; // 第一种写法
  return chars.length == 0 ? true : false; // 第二种写法
}

<h2>验证是否输入</h2>
<input type="text" id="strs" value="       需要过滤空格">
<input type="button" id="isContent" value="验证是否为空">

<script>
window.onload = function () {
  var _isContent = document.getElementById("isContent"),
      _strs = document.getElementById("strs");

  _isContent.onclick = function () {
    if (!_strs.value.replace(/^(\s|\u00A0)+|(\s|\u00A0)+$/g, "")) {
      alert("您的输入为空！");
    } else {
      alert("您的输入不为空！");
    }
  }
};
</script>

• 利用 replace() 与正则结合过滤空字符，再“!”符号判断是否为空

3. 禁止输入

方案一：通过表单元素的特殊属性控制输入

<input type="text" value="禁止输入" disabled />
<input type="text" value="禁止输入" readonly />

• disabled 属性无法与 <input type="hidden"> 一起使用；
• 通过 JavaScript 解除 disabled 值；

方案二：通过 JavaScript 控制输入的方法（通过事件控制文本输入或控制焦点）

<input type="text" value="禁止输入" id="inhibitingInput" />

window.onload = function () {
 var _inhibitingInput = document.getElementById("inhibitingInput");

 // 第一种写法，控制失去焦点
 _inhibitingInput.onfocus = function () {
   _inhibitingInput.blur();
 }

 // 第二种写法，通过 keyup 和 blur 组合使用
 var onText = function () {
   _inhibitingInput.value = "";
 }

 _inhibitingInput.onkeyup = _inhibitingInput.onblur = noText

}

• 方法二相较于方法一，有很多不足之处，如代码量多，无法直接阻止通过鼠标复制、粘贴来的文本，虽然失去焦点时可以清空内容，但还是有一定的缺陷