목차
- pattern 예제 - INPUT 텍스트 패턴 얻기
- pattern 정의
- pattern 구문
- pattern 예제 - INPUT 텍스트 패턴 설정
pattern 예제 - INPUT 텍스트 패턴 얻기
<form action="/action_page.php">
국가코드: <input type="text" id="hz" name="hz" pattern="[A-Za-z]{3}" title="3글자 영문 국가코드">
<input type="submit">
</form>
<button onclick="homzzang()">클릭</button>
<p id="demo"></p>
<script>
function homzzang() {
var x = document.getElementById("hz").pattern;
document.getElementById("demo").innerHTML = x;
}
</script>
결과보기
pattern 정의
INPUT 텍스트에 입력 허용 체크할 정규표현식을 지정하는 pattern 속성을 설정/반환.
1.
- pattern 설명 위해 HTML title 속성이나 JS DOM title 속성 사용 권장.
- 정규표현식 자세히 보기
2.
IE10 이상 주요 최신 브라우저 지원.
단, Safari 브라우저는 지원 X.
pattern 구문
반환
textObject.pattern
설정
textObject.pattern = regexp
[속성값]
regexp
텍스트 필드에 입력 허용할 정규식 패턴
[반환값]
정규표현식 나타내는 문자열 반환.
pattern 예제 - INPUT 텍스트 패턴 설정
<form action="/action_page.php">
Zip 코드: <input type="text" id="hz" name="hz">
<input type="submit">
</form>
<button onclick="homzzang()">클릭</button>
<p id="demo"></p>
<script>
function homzzang() {
document.getElementById("hz").pattern = "[1-3]";
document.getElementById("hz").title = "1~3 숫자";
document.getElementById("demo").innerHTML = "1~3 숫자만 포함 가능";
}
</script>
결과보기
