JavaScript 텍스트 상자 작성 시 주의 사항 scripts_javascript 팁

HTML에서는 텍스트 상자를 나타내는 두 가지 방법이 있습니다.

하나는 입력 요소를 사용한 한 줄의 텍스트이고, 다른 하나는 텍스트 영역을 사용한 여러 줄의 텍스트 상자입니다.

입력방법을 사용하려면 type을 추가하고 "text"로 설정해야 합니다.

• size 속성을 ​​사용하면 텍스트 상자에 표시할 수 있는 문자 수를 지정할 수 있습니다.
• value 속성은 텍스트 상자의 초기 값을 설정할 수 있습니다.
• maxlength 속성은 텍스트 상자에 허용되는 최대 문자 수를 지정하는 데 사용됩니다.
  

텍스트 영역의 초기 값은 시작 태그와 끝 태그 내에 배치되어야 합니다.

• cols는 텍스트 상자 문자 줄 수입니다.
  
• rows는 텍스트 상자 문자 열의 개수입니다.
  
또한 HTML의 텍스트 영역에 대한 최대 문자 수를 지정할 수 없습니다.

1. 텍스트를 선택하세요

위 텍스트 상자 모두 지원됩니다

select() 메서드, 이 메서드는 주로 텍스트 상자의 모든 텍스트를 선택하는 데 사용됩니다. 어떤 매개변수도 허용하지 않습니다.
텍스트 상자의 텍스트가 선택되면 이 메서드에 해당하는 선택 이벤트가 트리거됩니다.

1. select() 메소드 다음 코드는 텍스트 상자에 포커스가 있는 한 모든 텍스트를 선택합니다.

var textBox = document.getElementById("myForm").elements["firstName"];
//设置默认值
textBox.value = "input your firstName";
//设置事件
textBox.addEventListener("focus", function () {
  event.target.select();
});

2. 이벤트 선택 이 이벤트가 발생하는 경우:

• 일반적으로 선택 이벤트는 사용자가 텍스트를 선택하고 마우스를 놓을 때만 트리거됩니다.
• IE8 및 이전 버전에서는 사용자가 (마우스를 놓지 않고) 문자를 선택하는 한 선택 이벤트가 트리거됩니다. 은 select() 메서드가 호출될 때도 트리거됩니다.
• 예:

3. 선택한 텍스트 가져오기

var textBox = document.getElementById("myForm").elements["firstName"];
//设置默认值
textBox.value = "input your firstName";
//设置事件
textBox.addEventListener("select", function () {
  console.log("selected");
});

두 가지 속성 사용:

선택시작

• 
  선택종료
• 
  이 두 속성은 선택한 텍스트의 범위(오프셋)를 나타내는 0 기반 값을 저장합니다. 따라서 사용자가 선택한 텍스트 상자의 텍스트를 가져오려면 다음 코드를 사용할 수 있습니다.

또한 이 속성을 사용하여 포커스를 얻었을 때 기본 전체 선택 상태를 설정할 수도 있습니다.

var textBox = document.getElementById("myForm").elements["firstName"];
//设置默认值
textBox.value = "input your firstName";
//设置事件
textBox.addEventListener("select", function () {
  var selected = textBox.value.substring(textBox.selectionStart,textBox.selectionEnd);
  console.log(selected); 
});

또는:

textBox.addEventListener("focus", function () {
  textBox.selectionStart = "0";
  textBox.selectionEnd = textBox.value.length;
});

그러나 SelectionStart/End 속성을 사용할 때 IE8에서는 이를 지원하지 않지만

이라는 다른 속성을 지원합니다.

textBox.addEventListener("focus", function () {
  textBox.blur();
});

전체 문서 내에서 사용자가 선택한 텍스트 정보를 저장하는 document.selection 객체

• 
  선택한 텍스트의 호환 버전 가져오기:

2. 텍스트 일부 선택

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

텍스트의 일부를 선택하는 방법은 다음과 같습니다.

setSelectionRange() 메서드

. 선택할 첫 번째 문자의 인덱스와 마지막 문자의 인덱스라는 두 개의 매개변수를 받습니다.

사용자 선택을 차단하려면:
setSelectionRange() 호출 직전 또는 직후에 텍스트 상자에 포커스를 설정합니다. IE에서 사용하는 방법은 텍스트 문제를 해결하기 위한 적용 범위입니다.

textBox.addEventListener("focus", function () {
  textBox.setSelectionRange(0,0);
});
textBox.addEventListener("select", function () {
  textBox.setSelectionRange(0,0);
});

호환 버전: 더 일반적으로 사용됨

var range = textBox.createTextRange();
range.collapse(true); //范围折叠到开头
range.moveStart("Character",0);
range.moveEnd("Character",textBox.value.length);
range.select();

3. 필터 입력

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);
    range.select();
  };
}

1. 블록 문자

다음 코드는 숫자만 입력할 수 있습니다.

그러나 일부 브라우저는 위쪽, 아래쪽 및 백스페이스 키에 대한 키 누르기 이벤트를 트리거하므로 문자 인코딩이 10 미만인 키를 차단하지 않는 한 일반적으로 사용되는 이러한 작업 키를 금지 해제해야 합니다.

var textBox = document.getElementById("myForm").elements["firstName"];
textBox.autofocus = true;
textBox.addEventListener("keypress", function () {
  if (!/\d/.test(String.fromCharCode(event.charCode))) { //仅输入数字
    event.preventDefault();
  };
});

四、操作剪贴板

以下是6个剪贴板事件

• beforecopy：在发生复制操作前触发
  
• copy：在发生复制时触发
  
• beforecut：在发生剪贴前操作
  
• cut：在发生加贴时操作
  
• beforepaste：在发生黏贴操作前触发
  
• paste：在发生黏贴操作时触发
  

如设置禁止拷贝：

//拷贝之前提示禁止拷贝
textBox.addEventListener("beforecopy", function() {
  textBox.value = "do not copy";
});
//拷贝时禁止拷贝
textBox.addEventListener("copy", function() {
  event.preventDefault();
});

要访问剪贴板中的数据，可以使用clipboardData对象，在IE中，这个对象是window对象的属性，在friefox，safari和chrome，这个对象是相应event对象的属性；在IE中可以随时访问该对象；但在其他浏览器中只有在处理剪贴板事件期间才有效。

这个clipboardData对象有三个方法：

• getData()
  
• setData()
  
• clearData()
  

getData()接收一个参数，即要取得数据的格式（IE中有两种数据格式：text和URL；在其他浏览器中这个参数是一种MIME类型；不过可以用text代替text/plain）。

setData()接收两个参数，即数据类型和要放在剪贴板中的文本。（第一个参数中，IE支持text和URL；第二个参数中chrome和safari不支持text类型）;这两个浏览器在成功将文本放到剪贴板中后，都会返回true；否则，返回false：

function getClipboardText(event) {
  var clipboardData = (event.clipboardData || window.clipboardData);
  return clipboardData.getData("text");
}

function setClipboardText(event, value) {
  if (event.clipboardData) {
    return event.clipboardData.setData("text/plain", value);
  } else if (window.clipboardData) {
    return window.clipboardData.setData("text", value);
  }
}

目前浏览器逐渐收紧对访问剪贴板的操作。

五、自动切换焦点

理论上就是在前一个文本框中的字符打到最大数量后，自动将焦点切换到下一个文本框：

DOM:

<form action="">
  <input type="text" name="tel11" id="txtTel1" maxLength="3">
  <input type="text" name="tel12" id="txtTel2" maxLength="3">
  <input type="text" name="tel13" id="txtTel3" maxLength="4">
  <input type="submit" name="btn" id="btn" value="submit">
</form>

js:

var textbox1 = document.getElementById("txtTel1");
var textbox2 = document.getElementById("txtTel2");
var textbox3 = document.getElementById("txtTel3");

textbox1.addEventListener("keyup", tabForward);
textbox2.addEventListener("keyup", tabForward);
textbox3.addEventListener("keyup", tabForward);

function tabForward() {
  var target = event.target;
  //当value长度等于最大值的时候
  if (target.value.length == target.maxLength) {
    var form = target.form;
    //遍历所在的form表单中的元素
    for (var i = 0, len = form.elements.length; i < len; i++) {
      //如果该元素是目标元素
      if (form.elements[i] == target) {
        //并且该元素的下一个元素为true 其他条件
        if ((form.elements[i + 1]) && (form.elements[i + 1].nodeType == 1) && (form.elements[i + 1].tagName.toLowerCase() == "input") && (form.elements[i + 1].type == "text")) {
          //则下个元素获得焦点
          form.elements[i + 1].focus();
        }
      }
    };
  }
}

六、HTML5约束验证API

1、必填字段required属性

在必填字段中添加属性required。它适用于input,textarea,select字段。使用下面的代码可以检测浏览器是否支持required属性：

var isRequiredSupported="required" in document.createElement("input");

2、其他输入类型

input的type属性增加了“email”和“url”；各浏览器也都为它们增加了定制的验证机制：

var input = document.createElement("input");
input.type = "email";
var isEmailSupported = (input.type == "email");

3、数值范围

除了“email”和“URL”，HTML5还定义了另外几个输入元素。这几个元素都要求填写基于数字的值：“number”，“range”，“datetime”，“datetime-local”，“date”，“mouth”，“week”，“time”。目前浏览器对这些类型支持并不好，如果真想使用的话要小心。

对这事数值类型的输入元素可以指定min属性，max属性，step属性。同时这些数值类型元素还有两个方法：stepUp(),stepDown()。都接受一个参数，要在当前基础上加上或减去的数值。

DOM:

<form action="">
  <input type="range" name="tel14" id="txtTel4" required min="10" max="20" step="1">
  <input type="button" value="up" id="up">
  <input type="text" id="output">
  <input type="submit" name="btn" id="btn" value="submit">
</form>

js:

var input = document.getElementById("txtTel4");
var up = document.getElementById("up");

input.addEventListener("mousemove", function () {
  var output = document.getElementById("output");
  output.value = input.value;
});
up.addEventListener("click", function () {
  //点击value值以2为单位增加
  input.stepUp(2);
  var output = document.getElementById("output");
  output.value = input.value;
});

3、输入模式

HTML5新增了pattern属性，这个属性的值是一个正则表达式，用于匹配文本框中的值。

<input type="text" id="number" pattern="\d{3}">

var num = document.getElementById("number");
console.log(num.pattern); //\d{3}

可以使用以下代码来检测浏览器是否支持pattern属性：

var isPatternSupported="pattern" in document.createElement("input");

4、检测有效性

使用checkValidity()方法可以检测表单中的字段是否有效。所有表单的字段都有这个方法，如果检查有效返回true。

<form action="">
  <input type="text" pattern="w" id="name" required>
  <input type="number" max="10" id="num" required>
  <input type="button" id="check" value="check">
  <input type="submit" id="submit" value="submit" disabled>
</form>

var form = document.forms[0];
var name = document.getElementById("name");
var number = document.getElementById("num");
var check = document.getElementById("check");
var submit = document.getElementById("submit");

check.addEventListener("click", function () {
  console.log(form.checkValidity()); //检测整个表单是否正确
  if (form.checkValidity()) {
    submit.removeAttribute("disabled");
    check.disabled = true;
  }else{
    alert("请检查表单");
  }
});

input的validity属性会给出什么字段有效和无效的具体信息。

var inputName = document.getElementById("inputName");
inputName.onblur = function() {
  if (inputName.checkValidity()) {
    inputName.style.color = "white";
    inputName.style.backgroundColor = "green";

  } else {
    inputName.style.color = "white";
    inputName.style.backgroundColor = "red";
    if (inputName.validity.patternMismatch) {
      inputName.value = "请填写正确的格式";
    }
  }
};
inputName.addEventListener("mouseenter", function () {
  inputName.focus();
  inputName.select();
});

유효성에는 주로 다음 속성이 포함됩니다.

• customError: setCustomValidity()가 설정되었는지 여부
• patternMismatch: 패턴 속성과 일치하는지 여부;
• rangeOverflow: 최대값보다 큰지 여부
• rangeUnderflow: 최소값보다 작은지 여부
• stepMisMatch: 스텝 크기가 합리적인지 여부
• tooLong: 최대 길이를 초과했는지 여부
• typeMismatch: 메일 유형과 URL 유형이 아닌지 여부
• 유효: 여기의 다른 속성이 false인 경우 true를 반환합니다.
• valueMissing: 필수 값이 없으면 true를 반환합니다.

5. 인증 비활성화

양식의 novalidate 속성을 설정하면 양식을 확인할 수 없습니다. js를 사용하여 양식을 얻은 후 novalidate 속성을 true로 설정하면 양식 유효성 검사가 비활성화됩니다.

제출 버튼에 formnovalidate 속성을 추가하면 제출된 양식의 유효성이 검사되지 않습니다. js를 사용하여 제출 버튼을 얻은 후 formnovalidata 속성을 true로 설정하면 양식 유효성 검사가 비활성화되고 제출됩니다.
이상이 이 글의 전체 내용이며, 모든 분들의 공부에 도움이 되기를 바랍니다.