$(function () { $(".slider").each(function () { var $slider = $(this); // 현재 슬라이더 요소 var $input = $slider.closest('.input-group').find('.sliderValue'); // 해당 슬라이더의 input 요소 // 슬라이더 초기화 $slider.slider({ range: "max", min: 1, max: 1000000, value: 1, slide: function (event, ui) { $input.val(ui.value); // 슬라이더 이동 시 input 값 업데이트 } }); // 슬라이더의 초기 값을 input에 설정 $input.val($slider.slider("value")); // input 변경 시 슬라이더 값 업데이트 (실시간) $input.on("input", function () { var value = $(this).val(); // 숫자 범위 확인 후 슬라이더 값 업데이트 if ($.isNumeric(value) && value >= 1 && value <= 1000000) { $slider.slider("value", value); } }); }); $("form").on("reset", function () { setTimeout(function () { $("#divTwoSms #sendCnt").val(1); // 건수 필드 값을 1로 설정 $("#divTwoSms #slider").slider("value", 1); // 슬라이더 값도 1로 설정 }, 0); // setTimeout 사용 이유: reset 이벤트 후에 값 설정 }); /* * 예시 버튼 * */ $(".examBtn").on("click", function () { var tagId = getParentsId($(this)); var $recvPhone = $(tagId + ' .recvPhone'); var $sendPhone = $(tagId + ' .sendPhone'); var $msgType = $(tagId + ' .msgType'); var $message = $(tagId + ' .message'); var $subject = $(tagId + ' .subject'); // 기본 전화번호 설정 $recvPhone.val('01012345678'); $sendPhone.val('01043219876'); // 메시지 타입에 따른 메시지 설정 var msgType = $msgType.val(); var msg = generateMessage(msgType); // 내용 $message.val(msg); updateByteCount($message); if (msgType === 'L' ||msgType === 'M' ||msgType === 'A' ||msgType === 'F' ) { $subject.val('ITN SUBJECT'); } }); function generateMessage(msgType) { var messages = { 'S': 'ITN SMS test ', 'L': 'ITN LMS test ', 'M': 'ITN MMS message test ', 'A': 'ITN ', 'F': 'ITN ' }; // 타입이 위 값들고 같이 않으면 null 반환 return (messages[msgType] || '') + getNowDate(); } $('.msgType').on('change', function() { var msgType = $(this).val(); var tagId = getParentsId($(this)); if(msgType === 'L' ||msgType === 'M' ||msgType === 'A' ||msgType === 'F' ) { $(tagId+' .subject').closest('.form-group').show(); }else{ $(tagId+' .subject').closest('.form-group').hide(); } var $message = $(tagId + ' .message'); $message.val(generateMessage(msgType)); }); $('.toggle-info-btn').on('click', function() { var $card = $(this).closest('.card'); // 클릭한 버튼의 가장 가까운 부모 .card 요소 찾기 var $hiddenInfo = $card.find('.hidden-info'); // 해당 카드 내에서 .hidden-info 요소 찾기 $hiddenInfo.slideToggle(); // 애니메이션 효과를 추가하여 더 부드럽게 보이도록 함 var icon = $(this).find('i'); if ($hiddenInfo.is(':visible')) { icon.removeClass('fa-info-circle').addClass('fa-times-circle'); } else { icon.removeClass('fa-times-circle').addClass('fa-info-circle'); } }); $('textarea').on('input', function() { updateByteCount(this); }); }); // function updateByteCount(textarea) { // console.log('textarea : ', textarea); // var text = $(textarea).val(); // var byteLength = new TextEncoder().encode(text).length; // $(textarea).closest('.form-group').find('.byte-count').text(byteLength + ' bytes'); // } function updateByteCount(textarea) { var text = $(textarea).val(); var byteLength = calculateByteLength(text); $(textarea).closest('.form-group').find('.byte-count').text(byteLength + ' bytes'); } function calculateByteLength(text) { var byteLength = 0; for (var i = 0; i < text.length; i++) { var charCode = text.charCodeAt(i); if (charCode <= 0x007F) { byteLength += 1; // 1 byte for ASCII characters } else if (charCode <= 0x07FF) { byteLength += 2; // 2 bytes for characters from U+0080 to U+07FF } else { byteLength += 2; // 2 bytes for characters from U+0800 and above (including Hangul) } } return byteLength; } function getParentsId($obj){ var $col = $obj.closest('.col-md-6'); // 클릭한 버튼의 가장 가까운 부모 .card 요소 찾기 // 해당 카드 내에서 .hidden-info 요소 찾기 return '#' + $col.attr('id'); } function getNowDate(){ // 현재 날짜와 시간을 가져와서 포맷팅 var now = new Date(); var year = String(now.getFullYear()).substring(2); // 년도 마지막 두 자리 var month = ('0' + (now.getMonth() + 1)).slice(-2); // 월 (0부터 시작하므로 +1 필요) var day = ('0' + now.getDate()).slice(-2); // 일 var hours = ('0' + now.getHours()).slice(-2); // 시 var minutes = ('0' + now.getMinutes()).slice(-2); // 분 return year + month + day + '|' + hours + ':' + minutes; }