프리랜서 웹디자이너 RELATION RELATION.CO.KR

RELATION 로고

홈페이지 소스

[SCRIPT] INPUT 요소 공용속성 및 기본입력 설정 ime-mode

2017.12.21
INPUT 공용속성

** list 속성
- 웹 개발자가 직접 입력 후보값을 제공하는 기능
- 입력 후보값은 datalist 요소를 사용하여 마크업한다.
- http://relation.co.kr/images_board/board_system_publishing/36/demo1.html


**required
- 해당폼 컨트롤이 필수 속성인지 아닌지를 나타내는 논리속성
- required속성을 지정한 컨트롤에 값을 입력하지 않은 상태로 서버로 데이터를 전송할 경우 에러메세지가 웹브라우져에 출력된다.
- http://relation.co.kr/images_board/board_system_publishing/36/demo2.html


** pattern
- 폼 컨트롤에 입력하는 입력값의 정규 표현식을 의미한다.
- 정규식 표현 형식으로 입력값의 형식을 제한 할수 있으며, 이때 title 속성을 사용하여 정규 표현에 대한 설명을 함께 제공하는 것이 필요하다.
- http://relation.co.kr/images_board/board_system_publishing/36/demo3.html



** multiple
- 두개 이상의 값을 지정할 때 사용하는 논리속성
- http://relation.co.kr/images_board/board_system_publishing/36/demo4.html



** step
- number 타입에 step값에 5를 지정하면 0,5,10....형태로 값이 입력된다.
- http://relation.co.kr/images_board/board_system_publishing/36/demo5.html



** max, min
- 최대,최소 값의 제한을 준다
- http://relation.co.kr/images_board/board_system_publishing/36/demo6.html



** disabled
- 해당 폼 컨트롤을 할수 없도록 할때 사용
- http://relation.co.kr/images_board/board_system_publishing/36/demo7.html



** form
- input 요소가 나타내는 폼 컨트롤을 지정한 from 요소와 연결시킬때 사용한다.
- http://relation.co.kr/images_board/board_system_publishing/36/demo8.html
- HTML4와 XHTML1.0 : 전송 데이터는 form 요소안에 마크업
- HTML5 : form 속성의 추가로 인해 폼 컨트롤을 forn 요소안에 마크업 하지 않아도 연결시키는 것이 가능해짐
- http://relation.co.kr/images_board/board_system_publishing/36/demo8.html


** readonly
- 읽기전용으로 지정하기 위해 사용하는 논리속성
- readyonly 속성으로 지정하면 사용자가 값을 변경할 수 없다.


** size
- 화면에 보이는 폼 컨트럴의 크기를 지정한다.
- 웹브라우져에 따라 전각글자와 크기 반각 글자 크기 중 어느것을 기준으로 하느냐에 따라 폼 컨트롤의 크기가 달라질 수 있다.
- <input type="text" size='10' id="userName" name="userName" >


** maxlengh
- 폼컨트롤에 입력 할 수 있는 최대 글자수를 지정할 때 사용한다.
- 국문,영문,을 구별하지 않고 각각 1문자로 계산한다.
- <input type="text" size='10' maxlength="10" id="userName" name="userName" >


** placeholder
- 사용자에게 해당 폼 컨트롤에 어떤 값을 입력해야하는지를 알리는 힌트로 사용.
- plcaeholder 속성은 HTML5 속성으로 크롬,사파리,오페라,IE10 이상에서만 지원됨
- IE10 이상임에도 불구하고 지원되지 않는다면 meta테그 확인할것,
<!-- meta http-equiv="X-UA-Compatible" content="IE=8,IE=9" --> 안됨 하단으로 수정
..
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta http-equiv="X-UA-Compatible" content="IE=11.0000" >

- <input type="text" size='10' maxlength="10" id="userName" name="userName" placeholder="이름을 입력하세요" >


** autofocus
- 웹페이지가 로딩되자 마자 바로 폼 컨트롤로 포커스가 이동하도록 하는 논리속성
- <input type="text" autofocus="autofocus" id="userName" name="userName" >







인터넷에서 서식을 작성하다 보면 인풋박스( <input type=”text” /> )에 글을 쓸때,
한글을 쓰려고 하면 영문이 나오고, 영문을 쓰려고 하면 한글이 나오고 해서 좀 답답할 때가 있을것이라 생각합니다.
(저만 그런건가?)
아무튼, 그럴때 사용자를 조금만 더 생각한다면 답답하지 않고 사용하게 편할 수 있을 것 같습니다.
사용자를 배려하는 웹사이트 ㄱㄱ 출발!!
아주 간단합니다. 인풋박스를 가리키는 스타일에 “ime-mode”라는 속성을 주면 되는데요.

inactive : default 로 영문모드
active : default 로 한글모드
auto : 한/영 중 선택된 모드
disable : 영문만을 사용할 수 있는 모드

구체적인 사용방법은 이렇습니다.

<input type=”text” style=”ime-mode:inactive;” />

이런식으로 주면 되는데요. 뭐 어차피 스타일이기 때문에 이왕이면 스타일 시트에 주는게 낫겠지요?
<style type=”text/css”>
input.han {ime-mode:active;}
</style>
<input type=”text” class=”han” />

단. 크롬등 일부 타 브라우저에서 동작을 안할수가 있다.
크롬에서 안된다고 해서 정규식을 다시 찾음


=======================================================================================


<script type="text/javascript">

function han(obj) {
var pattern = /[^(ㄱ-힣)]/; //한글만 허용 할때
if (pattern.test(obj.value)) {
alert("한글만 허용합니다.");
obj.value = '';
obj.focus();
return false;
}
}
function eng(obj) {
var pattern = /[^(a-zA-Z)]/; //영문만 허용
if (pattern.test(obj.value)) {
alert("영문만 허용합니다.");
obj.value = '';
obj.focus();
return false;
}
}
function all(obj) {
var pattern = /[^(ㄱ-힣a-zA-Z0-9)]/; //한글,영문,숫자만 허용
if (pattern.test(document.getElementById('name').value)) {
alert("한글,영문,숫자만 허용합니다.");
obj.value = '';
obj.focus();
return false;
}
}
</script>

한글이름 : <input type="text" name="kName" style="ime-mode:active;" onkeyup="han(this)"> <br/>
영어이름 : <input type="text" name="eName" style="ime-mode:inactive;" onkeyup="eng(this)"> <br/>

이 포스트 공유하기

글수정  글삭제 전체목록
<
 
1
           
검색    글쓰기
번호 제 목 작성자 작성일 조회수
중요 [소스] 기존 a 태그 href를 이용하여 부드럽게 스크롤 이동하기 작성글은 비공개로 설정 되었습니다. 꿘쓰 2017.02.10 73
중요 [기타] 구글맵 플랫폼 꿘쓰 2019.01.22 3512
중요 [소스] 구글맵 반경 검색 작성글은 비공개로 설정 되었습니다. 꿘쓰 2018.01.08 17
중요 [소스] 구글맵 이동 경로 표시 꿘쓰 2018.01.18 3512
중요 [소스] 구글맵 좌표값 구하기 꿘쓰 2019.01.08 2169
중요 [소스] 구글맵 웹사이트 띄우기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2013.01.02 20764
227 [소스] 마우스 롤오버 효과 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.30 2
226 [기타] 퍼센트 계산, 백분율 계산 방식 꿘쓰 2020.06.22 55
225 [소스] Window.scroll() 꿘쓰 2020.06.22 60
224 [소스] scrollLeft(), scrollTop() 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.15 0
223 [소스] 숫자 카운트 1 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.03 1
222 [CSS] 그라데이션 자동 생성 사이트 꿘쓰 2020.05.29 95
221 [CSS] flex-wrap:wrap 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.05.29 0
220 [SCRIPT] 자바스크립트 number_format 숫자 콤마 제이쿼리 꿘쓰 2019.12.03 169
219 [소스] 구글 로그인 API 자바스크립트 꿘쓰 2019.08.16 324
218 [JQUERY] 체크박스 체크 유무 jquery 꿘쓰 2019.07.23 350
217 [CSS] css webkit, moz, ms, o 의미 꿘쓰 2019.04.16 519
216 [HTML] HTML5 Canvers 태그 꿘쓰 2019.03.22 614
215 [기타] 카카오 상담톡 비즈니스 메신져 꿘쓰 2019.03.21 587
214 [기타] a태그 onclick 클릭 이벤트 차이점 꿘쓰 2019.03.13 579
213 [소스] 카카오 로그인 작성글은 비공개로 설정 되었습니다. 꿘쓰 2019.03.08 1
212 [소스] 별점주기 꿘쓰 2019.02.21 684
211 [소스] Select option를 버튼(div) 방식으로 변경하기 꿘쓰 2019.02.21 672
210 [소스] 코멘트 게시판 디자인 이미지 테두리 둥글게 하기 (border-radius) 꿘쓰 2019.02.13 876
209 [소스] 아이폰 갤러리 이미지 저장 방지 꿘쓰 2019.01.09 622
208 [CSS] 줄바꿈, URL 줄바꿈을 위한 CSS 꿘쓰 2019.01.04 664