访问文本框的值

不管单行文本还是多行文本，在 JavaScript 中，都可以使用 value 属性读取和设置文本框的值。

✂️

html

<form action="javascript:alert('已成功提交 ')" id="form">
  <input type="text" size="25" value="en" />
  <textarea name="" cols="30" rows="10">en</textarea>
</form>
<script>
  var form = document.querySelector('form');
  var field1 = form.elements[0];
  var field2 = form.elements[1];
  alert(field1.value);
  alert(field2.value);
</script>

使用 select() 可以选择文本框的值。该方法不接受参数。

✂️

html

<form action="javascript:alert('已成功提交 ')" id="form">
  <input type="text" size="25" value="en" />
  <textarea name="" cols="30" rows="10">en</textarea>
</form>
<script>
  var form = document.querySelector('form');
  var field1 = form.elements[0];
  var field2 = form.elements[1];
  field1.onfocus = function () {
    this.select();
  };
  field2.onfocus = function () {
    this.select();
  };
</script>

HTML5 新增两个属性： selectionStar 、 selectionEnd ，这两个属性保存文本选取开头和结尾的偏移量。 IE 8 之前的版本不支持该属性，但是在 document.selection 对象，其中保存着用户在整个文档内选择的信息。

✂️

function getSelectedText(textbox) {
  if (typeof textbox.selectionStar == 'number') {
    return;
    textbox.value.substring(textbox.selectionStar, textbox.selectionEnd);
  } else if (document.selection) {
    return document.selection.createRange().text;
  }
}

使用：

✂️

html

<form action="javascript:alert('已成功提交 ')" id="form">
  <textarea name="" cols="30" rows="10">en</textarea>
</form>
<script>
  var form = document.querySelector('form');
  var field1 = form.elements[0];
  field1.onfocus = function () {
    alert(getSelectedText(this));
  };
</script>

如果选择部分文本，则使用 HTML 5 的 setSelectionRange() 方法，该方法接受两个参数，分别设置选择的第一个字符和左后一个字符的索引。

✂️

function selectText(textbox, startIndex, stopIndex) {
  if (textbox.setSelectionRange) {
    textbox.setSelectionRange(startIndex, stopIndex);
  } else if (textbox.createTextRange()) {
    var range = textbox.createTextRange();
    range.collapse(true);
    range.moveStart('character', startIndex);
    range.moveEnd('character', stopIndex - startIndex);
    range.select();
  }
  textbox.focus();
}

文本框过滤

通过向 keypress 添加事件阻止默认事件发生。

✂️

html

<form action="javascript:alert('已成功提交 ')" id="form">
  <input type="text" size="25" value="en" />
  <textarea name="" cols="30" rows="10">en</textarea>
</form>
<script>
  var form = document.querySelector('form');
  var field1 = form.elements[0];
  var field2 = form.elements[1];
  field1.onkeypress = function (event) {
    var e = event || window;
    if (e.preventDefault) {
      event.preventDefault();
    } else {
      event.returnValue = false;
    }
  };
</script>

只允许输入数字

✂️

var form = document.querySelector('form');
var field1 = form.elements[0];
var field2 = form.elements[1];
field1.onkeypress = function (event) {
  var e = event || window;
  if (typeof event.charCode == 'number') {
    var charCode = event.charCode;
  } else {
    var charCode = event.keyCode;
  }
  if (
    !/\d/.test(String.formCharCode(charCode)) &&
    charCode > 9 &&
    !event.ctrlKey
  ) {
    if (e.preventDefault) {
      event.preventDefault();
    } else {
      event.returnValue = false;
    }
  }
};