어제 오늘 내일

Javascript를 이용하여 버튼 클릭 시 input form의 값(value)을 변경하는 예제입니다. 버튼 클릭 시, input 값 변경하기 클릭하세요 function btnClick() { const myinput = document.getElementById('my-input'); myinput.value = "안녕하세요"; } HTML 버튼을 클릭하면, btnClick() 함수를 호출합니다. JAVASCRIPT document.getElementById('my-input'); getElementById() 함수를 이용하여, id가 my-input인 input form 요소를 선택합니다. myinput.value = '안녕하세요'; 선택한 input form 요소의 value를 '안녕하세요'로 변..

input 필드에 대한 스타일을 변경하는 방법을 알아보고 있습니다. [HTML/CSS] input 배경색, 글자색 변경하기 [HTML/CSS] input 커서 색상 변경하기 (caret-color) [HTML/CSS] input 커서 없애기 [HTML/CSS] input 테두리 아래만 남기기, 없애기 (border, outline) 이번에는 input 필드를 클릭했을 때 테두리의 색상을 변경하는 방법을 알아보도록 하겠습니다. input 클릭 시, 테두리 색상 변경 필드 클릭 시, 테두리 색상을 변경하기 위해서, 다음의 두 속성을 이용할 수 있습니다. border-color outline 이 두 속성의 지난번 포스팅에서 input 필드의 테두리를 없앨 때도 사용했습니다. [HTML/CSS] input 테두..

input 필드의 스타일링 방법에 대해 알아보고 있습니다. [HTML/CSS] input 배경색, 글자색 변경하기 [HTML/CSS] input 커서 색상 변경하기 (caret-color) 이번에는 input 필드를 클릭하면 나타나는 커서를 없애는 방법입니다. caret-color caret-color 속성의 input 필드의 커서 색상을 지정하는 속성입니다. 이 속성의 값을 'transparent'로 지정하여, input의 커서를 숨길 수 있습니다. 예제 .no-caret { caret-color: transparent; } 위 예제에서 첫번째 input에 필드를 클릭하면, 커서가 나타납니다. 두번째 input 필드를 클릭하면, 커서가 보이지 않습니다.

지난번에는 input의 배경색과 글자색을 변경하는 방법을 알아보았습니다. [HTML/CSS] input 배경색, 글자색 변경하기 이번에는 input 필드 안의 커서 색깔을 변경하는 방법입니다. caret-color 이 caret-color 속성을 이용하여 input 필드 안의 커서 색상을 변경할 수 있습니다. 예제 input { caret-color: red; } input 필드를 클릭해보세요. 커서가 빨간색으로 변경되었습니다.

input 필드의 배경색과 글자을 변경하기 위해서 다음 속성을 사용 할 수 있습니다. background-color : 배경색 변경 color : 글자색 변경 예제 input { background-color: yellow; color: red; }

이번 포스팅에서는 사용자가 체크박스를 선택했을 때, 텍스트 박스를 활성화하고 체크박스 선택을 해제했을 때, 텍스트 박스를 비활성화 하는 방법을 정리해보도록 하겠습니다. 체크박스 선택 시, 텍스트박스 활성화/비활성화 하기 다음 예제는 아래와 같이 동작합니다. 체크박스 선택 했을 때 텍스트 박스 활성화 텍스트 박스에 포커스 체크박스 선택해제 했을 때 텍스트 박스 비활성화 텍스트 박스 입력값 초기화 기타 의견 입력 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 키가 활성화 되어 있을 경우, 입력창 ..