DN을 읽으면서 발견한 세 가지 입력 요소 속성

최근에 나는 트위터를 읽다가 무심결에 발견했다.그는 나의 주의를 끄는 코드 단편을 공유했다.여기에는 DOMDocument Object Model에서 입력 요소에 액세스하고 일부 속성을 읽거나 변경할 수 있는 JavaScript가 포함되어 있습니다.나를 흥분시키고 놀라게 한 것은 이 집defaultValue이다.
나는 즉시 MDN을 열어 HTTMLInputElements 이 속성에 대한 내용을 더 읽었는데, 우연히 내가 모르는 속성을 발견해서 이 빠른 글을 썼다.
우리 시작합시다!

기본값

이것은 댄의 추문 예입니다. HTML이 있고 입력 요소가 있다고 가정하면 value 속성을 정의합니다. (속성은 HTML에서 정의되고 속성은 자바스크립트 대상에 속합니다.)

<input type="text" value="Hello world">

이제 이 원소를 잡고 수리를 시작할 수 있습니다.

const input = document.querySelector('input');

console.log(input.value);        // 'Hello world'

input.value = 'New value';

console.log(input.value);        // 'New value'
console.log(input.defaultValue); // 'Hello world'

보시다시피 속성value에 정의된 값은 원소 속성value에 최초로 반영됩니다.이것은 나에게 완전히 일리가 있다.현재 value 을 변경할 때 defaultValue 을 사용하여 초기 값에 액세스할 수 있습니다 (확인란 defaultChecked 에도 사용할 수 있습니다.멋있어!defaultValue의The MDN definition는 다음과 같습니다.

[It] returns / sets the default value as initially specified in the HTML that created this object.

원하는 경우 a CodePen 의 코드를 사용할 수 있습니다.

불확실했어

indeterminate속성은 매혹적인 속성이다.확인란에 선택된 것과 선택되지 않은 것 외에 다른 시각 상태가 있을 수 있다는 것을 아십니까?indeterminate는 속성이 없습니다. 이 작은 대시 번호를 자주 보는 체크 상자에 넣을 수 있습니다.

const input = document.querySelector('input');
input.indeterminate = true;

indeterminate 를 true 로 설정하면 복선상자의 값에 아무런 영향을 주지 않습니다. 제가 생각할 수 있는 유일한 합리적인 용례는 끼워 넣은 복선상자입니다. 예를 들어 Chris Coyier describes on CSSTricksindeterminate 확인란에만 해당되지 않습니다.라디오 단추와 진도 요소에도 사용할 수 있습니다.라디오 단추를 선택하지 않은 라디오 단추 세트를 보여 줍니다.라디오 그룹 단추에서 요소를 선택하지 않았을 때, 선택한 요소도 없고, 선택하지 않은 요소도 없기 때문에 모든 요소가 indeterminate 상태입니다.
멋진 것은 CSS 위조 클래스:indeterminate 위조 클래스를 선택한 요소에 사용할 수도 있고, 그룹의 라디오 단추를 선택하지 않았을 때 특정한 UI 구성 요소를 쉽게 표시할 수 있다는 것입니다.

.msg {
  display: none;
}

input:indeterminate ~ .msg {
  display: block;
}

속성indeterminate의 흥미로운 점은 이것을 true 또는 false로 설정할 수 있다는 점이다. 이것은 복선상자의 위조류에 영향을 주지만 라디오에는 영향을 주지 않는다.라디오 단추를 처리할 때 그룹의 실제 선택 상태는 항상 정확합니다.
완료를 위해 progress elements 속성이 정의되지 않았을 때 :indeterminate 을 포함하여 선택기와 일치합니다.value의The MDN definition는 다음과 같습니다.

[It] indicates that a checkbox or radio buttons have no value and are in indeterminate state. Checkboxes change the appearance to resemble a third state. Does not affect the value of the checked attribute, and clicking the checkbox will set the value to false.

원하는 경우 a CodePen 의 코드를 사용할 수 있습니다.

불확정, 선택 시작 및 선택 끝

이 세 가지 속성은 사용자가 무엇을 선택했는지 확인하는 데 사용할 수 있고 사용하기에 매우 간단하다.사용자가 입력 필드에서 텍스트를 선택하면 이 텍스트를 사용하여 선택한 내용을 평가할 수 있습니다.

const input = document.querySelector('input');

setInterval( _ => {
  console.log(
    input.selectionStart,
    input.selectionEnd,
    input.selectionDirection;
  ); // e.g. 2, 5, "forward"
}, 1000)

이 점을 테스트하기 위해서 나는 초당 한 번의 선택 값을 기록하는 간격을 정의했다.selectionDirection 및 selectionStart 는 내 위치를 설명하는 숫자를 반환하지만 selectionEnd 마우스 또는 터치보드를 사용하여 컨텐트를 선택할 때 뜻밖의 반환selectionDirection, Shift 키 및 화살표 또는 컨트롤 키를 사용하여 텍스트를 선택할 때 뜻밖의 반환none 또는 forward을 반환합니다.
원하는 경우 a CodePen 의 코드를 사용할 수 있습니다.
이렇게.:)

빠른 요약

DN은 신기한 자원입니다.backward 원소를 사용한 지 8년이 지났지만 아직도 새로운 것을 발견해야 한다. 이것이 바로 내가 웹 개발을 좋아하는 곳이다.개인적으로 저는 랜덤 MDN 글을 정기적으로 읽어보려고 합니다. (저는 매일 Slackbot이 열라고 알려줍니다bit.ly/randommdn. 왜냐하면 항상 발견해야 할 일이 있기 때문에 강력히 추천할 수밖에 없습니다!
읽어주셔서 감사합니다!❤️