본문 바로가기

프로그래밍

 (91)
input type number를 비밀번호로 표시하기 문제 HTML input type 속성은 하나의 타입만 허용한다. number냐, password냐 둘 중 하나를 골라야 한다. 그런데 숫자만 입력 받고, 모바일에서 숫자 키패드가 뜨고, 비밀번호로 표시하고 싶다면? CSS 비표준 스타일을 추가해준다. 예제 코드 HTML CSS .input-number-password { -webkit-text-security: disc; } 설명 type="number" 숫자 인풋이다. inputmode="numeric" 모바일 디바이스에서 일반 키패드 대신 숫자 키패드를 띄운다. class="input-number-password" 웹킷 힌트를 준 클래스를 적용하였다. -webkit-text-security 값으로는 disc 말고도 square나 circle 등이 올..
HTML5 / input type="number" maxlength 키보드 입력 제한하기 input number 키보드 입력 제한(자리수 제한, maxlength) input type number는 maxlength 어트리뷰트가 없다. 숫자 최소 최대값을 지정하는 min, max는 있지만 입력 자체는 가능하며 submit이 불가능할 뿐이다. 그런데 카드번호 입력 등의 form에서 자리수 입력을 제한해달라는 요청이 있었다. 다음처럼 input 이벤트를 잡아 해결하였다. 해결 type이 number이며 maxlength 어트리뷰트가 있는 element를 찾아 입력 자리수를 제한한다. $('input[type=number][maxlength]').on('input', function(ev) { var $this = $(this); var maxlength = $this..
Oracle/JDBC 해당 위치에 지원되지 않는 SQL92 토큰: 43 오류 해당 위치에 지원되지 않는 SQL92 토큰: 43 해결 오타가 있는 것이다. 내 경우에는 INSERT INTO 테이블명 (...) VALUES (...)를 INSERT INTO 테이블명 {...} VALUES {...}로 써서 오타가 났다 ㅠㅠ
부트스트랩 기간 달력 시작/종료일 제한하기 (Bootstrap datepicker, daterange) 그림처럼 시작일보다 빠른 종료일을 선택할 수 없도록 제한한다. (반대 경우도 마찬가지) 문제 페이지마다 달력을 각자 구현해서 어디는 언어나 날짜 포맷 등이 모두 달랐다. 그리고 화면에 따라 달력 방향이 엉뚱하게 input 위로 나오는 것 등이 있어, 표준 마크업으로 정리하고 일괄 선언하기로 했다. 그 중 대부분 목록화면의 검색조건에 사용되는 기간 검색에 시작일/종료일 선택 제한을 추가했다. 시작일은 종료일보다 늦을 수 없고, 종료일은 시작일보다 빠를 수 없게 설정한다. Bootstrap datepicker 공식 문서를 보니 startDate와 endDate 항목을 구현하면 된다고 한다. setStartDate와 setEndDate 메소드도 있다. 필요한 것이 모두 있으니 문제될 것이 없다. 아래처럼 간단..
JSTL: 서버단 코딩 없이 네이버 블로그 RSS로 포스트 목록 가져오기 문제 모 브랜드를 사이트를 개발하여 그 회사에서 운영하는 네이버 블로그를 읽어올 일이 생겼다. JSTL로 아주 간단하게 RSS를 읽어서 목록을 가져올 수 있었다. 순서 JSP 상단에 JSTL XML 태그라이브러리를 추가한다. 로 RSS를 읽어 변수에 담는다. 로 해당 xml을 파싱하여 변수에 담는다. 로 item을 반복하여 출력한다. 코드 네이버 블로그팀 목록을 가져와본 코드이다. 제목 날짜 결과 날짜 역시 JSTL 로 파싱하여 쓰면 된다.
JSP 에러 - TLD 또는 태그 파일 내의 attribute 지시어에 의하면 ~ 어떤 표현식도 받아들이지 않습니다. 오류 JSTL로 XML을 파싱하는데 다음과 같은 오류가 났다. TLD 또는 태그 파일 내의 attribute 지시어에 의하면, 속성 [xml]은(는) 어떤 표현식도 받아들이지 않습니다. JSP 상단에 다음과 같이 태그 라이브러리를 선언하였지만 계속 오류가 발생했다. 해결 태그 라이브러리 주소를 다음처럼 /jsp를 추가하여 바꾼다. 잘된다.
jQuery ajax - REST API 호출 시 HTTP 200에서 에러나는 경우 (HTTP 204) keywords: java, spring, rest controller, rest api, jquery ajax 오류 jQuery ajax로 REST API를 호출하여 정상적으로 저장 다 되고 HTTP 200을 리턴했는데 화면단에서 오류가 났다. $.ajax({ type: 'post' // ... 어쩌고저쩌고 }).done(function(){ console.log('success'); }).fail(function(jqXhr){ console.error(jqXhr); }); 컨트롤러에서는 이렇다. @PostMapping("/set-password") public ResponseEntity setPassword(@RequestBody Map payload) throws Exc..
같은 element에 등록된 여러 이벤트 리스너 호출을 막는 stopImmediatePropagation() 문제 여태 preventDefault()나 stopPropagation()을 사용할 일은 많았다. 그런데 오늘 모달 팝업 개발 중, 공통에서 처리해둔 닫기버튼 이벤트 전에 confirm을 띄워야 하는 일이 생겼다. 하나의 엘리먼트에 다른 클릭 이벤트 리스너를 추가해서 이벤트 전파를 막아야 하는 것이다. 결론저으로 앞에 언급한 두 가지 모두 아니고, stopImmediatePropagation()을 사용해야 한다. 정리 preventDefault - 기본 동작을 막는다. (예컨대 submit 버튼이라면 form submit을 막음) stopPropagation - 이벤트 버블링을 방지한다. stopImmediatePropagation - 같은 element 동일한 이벤트(예:클릭)에 여러 리스너가 등록되어..

티스토리툴바