반응형
좁은 폼 안으로 input, 특히 type이 date인 input을 넣을 때에는 안에 있는 글씨가 길 경우, 잘리는 현상이 있을 수 있습니다. 잘리는 것 정도는 어쩔 수 없다해도 date안에 든 아이콘의 공백이 너무 길어서 당황스러울 때가 있었는데요.
이럴 때, css로 단순하게 해결할 수 있는 방법이 있습니다.
아래 소스를 참고해주세요.
반응형
'[공부]하는 몽씨 > tip' 카테고리의 다른 글
| [tip] swiper.js로 fullpage.js 대체하기 (0) | 2023.02.02 |
|---|---|
| [tip] 아크로뱃 DC (acrobat DC) 한글 깨지는 부분 해결 방법 (0) | 2022.03.14 |
| [tip] css로 속성 선택하기 (문자열 일치) (0) | 2022.03.02 |
| [tip] a 링크, label 선택 버튼 (button) 체크 형태 만들기 (0) | 2022.01.11 |
| [tip] 가격(숫자 3자리, 천단위)에 자동 콤마 (input or div) 넣기 (0) | 2022.01.10 |
반응형
금액 부분을 넣을 때, 숫자 3자리마다 콤마가 없으면 가독성이 떨어지기 때문에 되도록 콤마를 넣어주는 것이 좋습니다.
금액에 자동 콤마를 넣는 경우는 여러가지가 있지만 input에 사용자가 입력한 숫자에 자동적으로 넣게 하거나, 스크립트를 통해 나온 숫자에 콤마를 붙여주는 방법을 소개하려 합니다.
새로 만든 html 파일에 아래 내용을 넣어줍니다.
* html
<input type="text" maxlength="10" onkeyup="inputNumberFormat(this);" placeholder="input 숫자만" />javascript 파일에 해당 내용을 넣어줍니다.
(아래 내용에는 input에 숫자만 넣을 수 있는 스크립트가 포함되어 있습니다.)
* javascript
function comma(str) {
str = String(str);
return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,');
}
function uncomma(str) {
str = String(str);
return str.replace(/[^\d]+/g, '');
}
function inputNumberFormat(obj) {
obj.value = comma(uncomma(obj.value));
}
function inputOnlyNumberFormat(obj) {
obj.value = onlynumber(uncomma(obj.value));
}
function onlynumber(str) {
str = String(str);
return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g,'$1');
} 이렇게 하면 input에 콤마를 자동적으로 넣을 수 있게 됩니다. 다음은 영역 안에 있는 숫자에 콤마를 붙여보죠.
* html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<span id="money">60000</span><span>원</span>* javascript
var money = $('#money').text();
var money2 = money.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
$('#money').text(money2);id 안에 들어오는 숫자 데이터는 자동적으로 콤마가 붙여지게 됩니다.
* 참고사이트
https://chobopark.tistory.com/175
[정규식] input숫자만입력&콤마적용 방법!!
(일부 오류가 있어 onlynumber 함수를 추가하였습니다. 2021년 5월 11일) 안녕하세요. 오늘은 정규식에서 input창에 숫자만 적히면서 콤마를 붙일수도, 안 붙일수도 있는 정규식을 이야기해보겠습니다.
chobopark.tistory.com
반응형
'[공부]하는 몽씨 > tip' 카테고리의 다른 글
| [tip] css로 속성 선택하기 (문자열 일치) (0) | 2022.03.02 |
|---|---|
| [tip] a 링크, label 선택 버튼 (button) 체크 형태 만들기 (0) | 2022.01.11 |
| [tip] css로 숫자 증가되는 (카운터/자동넘버링) 리스트 만들기 (0) | 2021.12.06 |
| [Tip] 웹폰트 적용 방식 (0) | 2021.09.08 |
| [Tip] magnific popup을 iframe 안에서 열었을 시 문제점 (0) | 2020.11.02 |
반응형
[javascript] input 이메일 유효성 체크
이메일을 작성하는 input란에 내용을 넣을 때, 이메일이 형식에 맞게 작성되어있는 지
확인할 수 있도록 input 아래에 에러 메세지를 넣어달라는 요청이 있었습니다.
먼저 <head></head> 사이에 jquery 플러그인을 넣어주시고
그 다음 html 안에 내용을 작성합니다.
<input type="email" placeholder="이메일" name="mail" id="mail" maxlength="30">
<div id="error_mail" class="result-email result-check"></div>
내용을 다 작성하였다면 다음은 javascript 차례인데요,
</body> 전에 아래 스크립트를 작성합니다.
function email_check( email ) {
var regex=/([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
return (email != '' && email != 'undefined' && regex.test(email));
}
$("input[type=email]").blur(function(){
var email = $(this).val();
if( email == '' || email == 'undefined') return;
if(! email_check(email) ) {
$(".result-email").text('이메일 형식으로 적어주세요');
$(this).focus();
return false;
}else {
$(".result-email").text('');
}
});
이렇게 내용을 작성하면 이메일 형식 (ex. test@test.com)이 아닐 경우에는
하단에 '이메일 형식으로 적어주세요' 라는 에러 메세지가 뜨게 됩니다.
반응형
'[공부]하는 몽씨 > javascript' 카테고리의 다른 글
| [javascript] 모바일SMS 문자 보내기 (0) | 2021.03.16 |
|---|---|
| [javascript] 현재 시간 select로 잡기 (0) | 2020.07.16 |
| [javascript] 자동롤링되는 실시간검색어 만들기 (2) | 2018.05.18 |
| [javascript] on,off 스위치 만들기 (토글버튼: Togglebutton) (4) | 2017.08.21 |
| [javascript] slideup 효과로 상단배너 숨기기 (0) | 2017.07.26 |
