kasumil의 코딩 공작소

https://datatables.net/plug-ins/pagination/input Navigation with text input Navigation with text input Shows an input element into which the user can type a page number Sometimes for quick navigation, it can be useful to allow an end user to enter which page they wish to jump to manually. This paging control uses a text input box datatables.net 페이지네이션으로 페이지별 쪼갰는데, 해당 기본 옵션에선 첫장과 끝장빼곤 한개씩 이동이라.....

HTML JS let decimalType = 1; function isNumberKey(evt) { let charCode = (evt.which) ? evt.which : event.keyCode; if (charCode != 46 && charCode > 31 && (charCode 57)) return true; // Textbox value let _value = event.srcElement.value; // 소수점(.)이 두번 이상 나오지 못하게 if(decimalType == '특정타입') { // 특정 타입의 경우 아예 입력 못하게 막기 if (charCode == 46) { return false; } } else { let _pattern0 = /^\..

해당부분으로 입력시 영어와 숫자만 입력되고 나머진 입력이 애초에 되지 않는다. 숫자와 점만 입력하게 하기 숫자만 입력하게 하기. 이상 끝.

좀 뻘글이긴한데, 그냥 회사에서 쓰려고 디자인 찾기 귀찮아서 저장해둠. https://csshint.com/css-input-text/ 20+ CSS Input text - csshint - A designer hub Latest Collection of free Hand picked Html CSS Input text Examples. Demo and Download the zip (*.zip). jumping input text, CSS Floated Labels csshint.com https://freefrontend.com/css-select-boxes/ 31 CSS Select Boxes Collection of free HTML and CSS custom select box code exam..

버그 체크를 하는데, 간혹 파일 선택을 했는데 다시 파일 선택창이 뜬다. 무엇이 원인인고? 하고 봤더니 라이브러리 자체버그.. 기본 공식문서에서 주는 방법이다. 이렇게 쓰지말고, 그냥 버그 없는 것 같은 라이브러리 버전 찾아서 해당 버전으로 고정해서 쓰자. 이래야 버그가 없더라.

$('#upload').on('change', function() { console.log('upload'); }); 방법은 간단하다. 변화를 감지하게 하여 해당 파일이 업로드시에 해당 console.log가 찍히는 부분에 원하는 코드 예를 들어 ajax나 또는 axios, fetch를 넣어 서버에 통신하게 하면된다. 속도에 문제가 있다하면, 제이쿼리보다 바닐라코드가 빠르므로 제이쿼리를 쓰지 않는다면, 바닐라 코드를 쓰길 권장한다. document.getElementById('upload'); 이렇게 접근하면 된다.

흔히들 보는 이미지 업로드 방식은 바로 input을 이용한 방식일 것이다. 대충 만들었다. 다들 이렇게 해서 파일을 보내리라고 본다. 내가 기존에 작성한 toast ui 업로드 방식에서 이미지서버가 아닌 move file을 이용한 업로드를 구현해야했다. 그러다보니 기존 blob을 사용해야하는데 input에서는 작동하지 않는다.... 이를 위해서 blob으로 바꿔줘야 했다. let file = $('#file').prop("files")[0]; // input file에서 데이터 뽑는 방법 let tmp = new Blob([file], { type: `${file.type}` }); // 타입은 동적으로 보내서 감지할 수 있게 했음. let formData = new FormData(); formData..

input[type="datetime-local"]::-webkit-calendar-picker-indicator { color: rgba(0, 0, 0, 0); opacity: 1; display: block; background: url(https://cdn3.iconfinder.com/data/icons/linecons-free-vector-icons-pack/32/calendar-16.png) center/80% no-repeat white; // 여기서 중앙정렬과 배경색을 준다. width: 20px; height: 20px; border-width: thin; cursor: pointer; } 아이콘이 마음에 들지 않아 내가 찾아 수정한 것이고, 기본 베이스는 아래코드를 사용했다. input[..

input 창에 밸류를 넣어야한다. 그런데, 제이쿼리 구현하긴 귀찮다. 그러다보니 그런 것을 찾았는데, 결국 찾았다. 바로 datetime-local! 사용 방식은 이러하다. 그런데, 시간 규격이 개떡같다. mysql 시간 규격은 YYYY-MM-DD hh:mm:ss인데, 필요한 시간 규격은 YYYY-MM-DDTHH:MM:SS라 다른 곳에서 쓰는 규격 양식으로 전환해야한다. 출처 https://hianna.tistory.com/319 [HTML] 날짜 입력 항목에 현재 시간을 기본값으로 세팅하기 날짜 시간 입력 항목에 기본값으로 현재 날짜, 시간을 지정하는 방법을 알아보도록 하겠습니다. 날짜 입력 항목에 현재 시간을 기본값으로 세팅하기 지난번에는 HTML의 태그를 이용하여 날짜, 시 hianna.tisto..

복사가 불가능하다. 복사버튼을 클릭하면 input태그에 있는 value 값을 가져와 해당 값을 복사기능을 구현하고, input태그를 숨겨버리려고 했는데, 특이하게도 숨겨져있으면 복사가 안된다. 그래서 필요한 코드가 화면에 아예 안보이게 던져버리려고 해당 코드를 작성하였다. position: absolute; left:-1000px; top:-1000px; 원래는 buttton 태그 안에 value 값을 구현했으나 해당 부분은 ajax 같은 값을 어딘가에 넘길때나 쓰는거지 let ch = $(태그).attr('value'); ch.select(); => 작동 불가. $(태그).select() => value 값 못 가져옴. 이러길래 그냥 따로 input창 만들어서 후딱 해버렸다. 이런 기능에 시간 낭비하는..