JS 학습노트 7_폼 스크립트

##1. 폼 및 폼 요소 참조 취득 방법##

var mForm = document.forms[formName];폼 참조 취득

mForm.elements[elemName] 폼 요소 취득, 동명의 요소가 있으면 요소 그룹을 얻습니다 (예: radio button)

##2. 폼 요소의 일반적인 속성, 메서드, 이벤트##

속성:

name:필드명
value:필드값
type:필드타입, 예:button, radio 등
readOnly:읽기 전용 설정
disabled:비활성 설정

메서드:

focus():포커스 획득
blur():포커스 취소

이벤트:

focus:포커스를 획득할 때 트리거
blur:포커스를 잃을 때 트리거
change:텍스트박스 input 과 텍스트영역 textarea 는 포커스를 잃고 value 값이 변경될 때 트리거, 드롭다운리스트 select 옵션이 변경될 때 트리거

##3. 폼 제출 방식##

버튼 제출
코드 제출:form.submit();
Enter 키 제출:textarea 외의 임의 폼 필드에서 Enter 키 누르기

주의:

코드 제출은 submit 이벤트를트리거하지 않습니다. 따라서 폼 데이터를 사전에 검증해야 합니다
코드 리셋은 reset 이벤트를트리거합니다. 하지만 실제 응용에서는 reset 기능을 자주 사용하지 않습니다. 실수로 리셋을 클릭하면 매우 곤란하기 때문입니다

##4. 몇 가지 제출 버튼##

일반 제출 버튼:<input type="submit">
커스텀 제출 버튼:<button type="submit"></button>
이미지 버튼:<input type="image" src=url>
기타 비버튼 요소:<a href=url onclick="forms['mForm'].submit();">제출</a>

주의:고전 서적에서는 폼에 앞의 3 가지 버튼 중 하나가 있을 때만 Enter 키를 누르면 폼이 제출된다고 했지만, 본기의 IE8, FF, Chrome 테스트에서는 모두 제출 가능했습니다 (폼에 텍스트박스만 있어도 Enter 키로 제출 가능)

##5. 텍스트박스/텍스트영역 (input/textarea) 일부/전체 선택##

주류 방식:

var text = document.forms[0].elements['userName'];
text.select();//全选
text.setSelectionRange(0, 3);//选择前 3 个字符（3 个汉字或者字母）

[IE8-] 에서 선택 텍스트 설정/취득 방식은 주류 방식과 다릅니다. 선택 설정 방식은 다음과 같습니다:

var range = text.createTextRange();
range.collapse();//把范围折叠到开始位置
range.moveStart('character', 0);
range.moveEnd('character', 3);
range.select();

P.S. 선택은 자동 완성 텍스트박스 구현 시 자주 사용됩니다. 예를 들어 브라우저의 URL 입력박스

##6. 클립보드 액세스##

클립보드 액세스에 관해서는 각 브라우저의 구현에 차이가 있으며, 일부 브라우저는 클립보드 액세스를지원하지 않습니다. 따라서 부적절한 클립보드 내용을 수정하여 검증을 통과시키려고 시도하지 말고, 이러한 이벤트의 기본 동작을 차단해야 하며, 필요할 때는 단축키를 비활성화할 수도 있습니다

paste/cut/copy 이벤트의 기본 동작을 취소하여클립보드를 비활성화할 수 있습니다

##7. select 의 일반적인 속성과 메서드##

속성:

options:select 의 모든 Option 취득
selectedIndex:선택 항목의 인덱스 취득 (선택되지 않은 경우 -1, 다중 선택은 첫 번째 선택 항목의 인덱스)

메서드:

add(newOption, relOption); relOption 앞에 newOption 삽입
remove(index); 인덱스가 index 인 Option 제거

##8. option 의 일반적인 속성과 메서드##

속성:

selected:선택 설정
index:该项在 options 中的索引

메서드:

Option 추가:

 var newOption(text, value);//一般 text 和 value 相同，value 用于提交数据
 selectbox.add(newOption, undefined);//在末尾插入

Option 제거:

 selectbox.remove(index);//移除第 index 项
 while(selectbox.options.length){//移除所有项
   selectbox.remove(0);
 }

##9. 리치 텍스트박스를 구현하는 2 가지 방식##

iframe 삽입, src 를 빈 문서로 설정, frames[iframeName].document.designMode = 'on'; 설정하면 body 편집 가능 구현
임의 요소의 contentEditable 속성 설정, 예:p.contentEditable = 'true'; 임의 요소 편집 가능 구현

주의:

위의 2 가지 방식은 전 브라우저 호환됩니다. contentEditable 이 HTML5 속성임을 걱정할 필요 없습니다. IE 는 수년 전에 이를 구현했으며, 본기 테스트에서 [IE6+] 모두 지원합니다
contentEditable 은대문자 E에 주의하십시오. 소문자는 무효입니다
리치 텍스트박스는 폼 요소가 아니므로 자동으로 제출되지 않습니다. 숨김 폼 필드를 사용하여 리치 텍스트 내용을 운반해야 합니다
리치 텍스트박스 내용의 포맷팅 (굵게, 전/배경색 설정 등) 을 지원하지만, 각 브라우저의구체적인 구현이 다릅니다. 따라서 동일한 명령이라도 다른 텍스트 내용이 생성될 수 있습니다

댓글

댓글 작성