어제 오늘 내일

이번 포스팅에서는 사용자가 체크박스를 선택했을 때, 텍스트 박스를 활성화하고 체크박스 선택을 해제했을 때, 텍스트 박스를 비활성화 하는 방법을 정리해보도록 하겠습니다. 체크박스 선택 시, 텍스트박스 활성화/비활성화 하기 다음 예제는 아래와 같이 동작합니다. 체크박스 선택 했을 때 텍스트 박스 활성화 텍스트 박스에 포커스 체크박스 선택해제 했을 때 텍스트 박스 비활성화 텍스트 박스 입력값 초기화 기타 의견 입력 function toggleTextbox(checkbox) { // 1. 텍스트 박스 element 찾기 const textbox_elem = document.getElementById('my_text'); // 2-1. 체크박스 선택여부 체크 // 2-2. 체크박스 선택여부에 따라 텍스트박스 활성..

Javascript에서 버튼을 활성화/비활성화 하는 방법을 알아봅니다. input 태그의 disabled 속성 HTML의 태그를 사용한 버튼을 활성화/비활성화 할때는 disabled 속성을 이용합니다. 기본적으로 input 태그에 disabled 속성을 따로 명시해 주지 않으면, 버튼은 활성화됩니다. input 태그에 disabled 속성을 명시해 주면, 버튼이 비활성화 됩니다. disabled 속성에 어떤 값을 주면, 버튼은 활성화되게 됩니다. 따라서, disabled 속성에 값을 주면서, 버튼을 비활성화 하고 싶다면 'disabled'라고 명시해 주어야 합니다. 버튼 클릭하여 활성화/비활성화 하기 '활성화' 또는 '비활성화' 버튼을 클릭하세요 function btnActive() { const tar..

1. oninput 이벤트, 정규식, replace() 함수 사용하기 2. pattern 속성 적용하기 1. oninput 이벤트, 정규식, replace() 함수 사용하기 function handleOnInput(e) { e.value = e.value.replace(/[^A-Za-z]/ig, '') } (JS, HTML 탭을 클릭하여 소스코드를 확인하세요) 이 코드는 사용자가 알파벳이 아닌 다른 값을 입력하면 아예 입력이 되지 않습니다. input에 사용자가 값을 입력하면 handleOnInput 함수를 실행시키고, 이 함수는 사용자가 입력한 값을 replace함수와 정규식을 활용하여 입력한 값에 알파벳이 아닌 문자가 있는 경우 공백으로 변환시켜서 input에 다시 넣어줍니다. 2. pattern 속..

Javascript의 input 폼에 입력되는 최대 글자수를 제한하는 방법 2가지를 알아보도록 하겠습니다. 1. maxlength 속성 사용하기 2. 입력된 글자수를 체크로직 구현하기 1. maxlength 속성 사용하기 maxlength 속성을 지정하여 최대 입력 글자수를 제한할 수 있습니다. 위 예제는 최대 5글자까지만 입력이 가능합니다. 그러나, 이 방법은 input의 type이 'text, search, url, tel, email, password' 일 경우에만 유효합니다. type이 'number'일 경우에는 유효하지 않습니다. 따라서, type이 'number'인 경우에는 다음의 방법을 사용해야 합니다. 2. 입력된 글자수를 체크로직 구현하기 function handleOnInput(elem..

사용자에게 input 창에 입력을 받을 때, 사용자 키보드의 Caps Lock 키가 활성화 되어 있는지 확인하여, Caps Lock이 활성화 되어 있으면 메시지를 보여주는 방법을 소개합니다. Caps Lock 키 활성화 여부 체크하기 function checkCapsLock(event) { if (event.getModifierState("CapsLock")) { document.getElementById("message").innerText = "Caps Lock이 켜져 있습니다." }else { document.getElementById("message").innerText = "" } } 위 예제는 입력창에 뭔가가 입력되면, 사용자의 키보드에 Caps Lock 키가 활성화 되어 있을 경우, 입력창 ..

input 필드를 비활성화 하는 방법은 disabled 속성을 사용하는 방법과 readonly 속성을 사용하는 방법 이렇게 2가지가 있습니다. 이 두가지 속성을 사용하는 방법과 차이점을 알아보도록 하겠습니다. input 필드 비활성화 하기 (disabled, readonly 차이) 1. disabled 2. readonly 1. disabled input 필드에 disabled 속성을 사용하면, 위의 예제와 같이 input 필드가 비활성화 됩니다. input 필드의 색깔이 바뀌고, input 필드를 클릭해도 포커스가 가지 않습니다. 가장 중요한 것은, disabled 속성을 설정하면, 위의 예제와 같이 기본값이 설정되어 있더라도, submit을 수행하면 값이 전달되지 않습니다. 2. readonly in..

input 박스에서 사용자에게 숫자만 입력되도록 설정하는 방법 4가지를 소개합니다. input 박스에 숫자만 입력되도록 설정하는 4가지 방법 1. 'type'을 'number'로 지정하기 2. 입력된 keycode 체크하기 3. oninput 이벤트, 정규식, replace() 함수 활용하기 4. pattern 속성 활용하기 1. 'type'을 'number'로 지정하기 기본 예제 input의 type속성을 'number'로 지정하면, 숫자만 입력 받을 수 있습니다. 브라우저에 따라서, 입력창 오른쪽에 숫자 증감 아이콘도 생성됩니다. min, max, step 속성 지정하기 input의 type을 'number'로 지정한 경우, min, max 속성을 추가하여 최대값과 최소값을 지정할 수 있습니다. st..

필드에 입력받은 값을 화면에 출력하는 방법입니다. 사용자가 타이핑 할때마다 input 값 출력하기 See the Pen js by anna (@hianna) on CodePen. HTML 사용자로부터 값을 입력 받을, id='name'인 element를 생성하였습니다. onkeyup 이벤트(키보드가 눌려졌을 때 발생하는 이벤트)가 발생하면, printName() 메소드를 호출하도록 하였습니다. 폼에 입력받은 값을 출력할 위치입니다. Javascript function printName() { const name = document.getElementById('name').value; document.getElementById("result").innerText = name; } const name = d..

지난 번에는 사용자가 로컬에서 파일을 선택하고, 그 파일 내용을 읽어오는 방법을 알아보았습니다. [HTML] input type='file' 속성 알아보기 ( 파일 입력 ) [HTML] input type='file' 속성 알아보기 ( 파일 입력 ) 웹페이지에서 사용자의 로컬 파일을 입력받기 위해서는 다음과 같이 input 태그의 type속성을 file로 지정하는 방법을 사용합니다. See the Pen read file by anna (@hianna) on CodePen. 여기에서는 input의 type.. hianna.tistory.com [Javascript] 로컬 텍스트 파일 읽기 (다중 파일 선택) [Javascript] 로컬 텍스트 파일 읽기 (다중 파일 선택) HTML/Javascrip로 로..

웹페이지에서 사용자의 로컬 파일을 입력받기 위해서는 다음과 같이 input 태그의 type속성을 file로 지정하는 방법을 사용합니다. See the Pen read file by anna (@hianna) on CodePen. 여기에서는 input의 type을 'file'로 지정했을 때 추가로 사용할 수 있는 속성들에 대해서 알아보도록 하겠습니다. > "accept" 입력받을 수 있는 파일의 유형을 지정하는 속성입니다. accept 속성을 지정하지 않으면 모든 유형의 파일을 입력 받을 수 있습니다. 여러 종류의 파일을 입력받기 위해서는 아래와 같이 쉼표로 목록을 구분하여 작성합니다. See the Pen read file by anna (@hianna) on CodePen. accept 속성 값 - 확..