프로그래밍/Javascript
입력 제한, 숫자,object controller js
즐겁게 하하하
2022. 1. 14. 02:47
728x90
■ input box 컨트롤
// 버튼클릭하면 인풋박스 만들기.
$(document).on("dblclick","#double_click",function(){
$(this).html('<input type="text" id="upd_text" value="">');
});
// 버튼클릭 할때 자동으로 여러번 스크립트 실행 되는것 막기
$("#custSelectBtn").off().on('click', function() {
setCustSelected();
});
//누르고나면 버튼 사라짐
<input type=”submit” onClick=”this.style.visibility=’hidden'” value=”누르고나면 버튼사라져" />
//누르고 나면 비활성화(POST로 데이터 못가져옴. form최종 전송하기전에 disabled 헤제해야 데이터 가져옴)
<input type=submit onclick=”this.disabled=true” value=”누르고나면 비활성화”>
//input 상자 전부 비활성화 (POST로 데이터 못가져옴. form최종 전송하기전에 disabled 헤제해야 데이터 가져옴)
$('input').attr('disabled', 'disabled');
//input 상자 id값으로 비활성화.
$('#warehouse_nm').attr('disabled', 'disabled');
//input 전부 활성화
$('input').removeAttr("disabled");
//name값으로 속성 컨트롤 (POST로 데이터 못가져옴. form최종 전송하기전에 disabled 헤제해야 데이터 가져옴)
$("input[name=sel]").attr("disabled",true);
//input 상자 readonly로 변경하기.
document.getElementById("myText").readOnly = true;
$('input[type="text"], textarea').removeAttr('readonly');
$('#descrip').removeAttr('readonly');
$("input[name='하고자하는 속성의 name']").attr("readonly", true);■ Radio 버튼 컨트롤
선택된 값 전송
$("input[name='iCategoryBtn']:checked").val();
읽어온 값 체크되게 하기
$('input:radio[name=WORK_DIV][value=' + workDiv + ']').prop("checked", true);
라디오 체크헤제
$("input:radio[name='pc_check']").prop("checked", false);
라디오 선택값 가져오기
<input type='radio' name='pd_state_exhibition' value='1' <?=check("1", $row->pd_state_exhibition)?> />진열함
<input type='radio' name='pd_state_exhibition' value='2' <?=check("2", $row->pd_state_exhibition)?> />진열안함
라디오 db값가져와서 라디오버튼에 넣어주기
<input type="radio" name="gender" value="여자" <? if($t->gender=="여자") echo checked; ?> />여자
예 )
<input type="fruit" value="apple" />사과
<input type="fruit" value="banana" />바나
<input type="fruit" value="pineapple" />파
1. radio 버튼 선택
$("input[name='etrtBzenOfrYn'][value='N']").prop("checked", true);
2. radio 버튼 선택된 값 가져오기
var fruitValue = $("input[name='eventQuestions["+ i + "].ty']:checked").val();
//라디오 클릭시 이벤트
$("input:radio[name='commission_chk']").click(function(){
if($("input:radio[name='commission_chk']:checked").val() == "법정수수료"){
$("#commission").val("");
$("#commission").attr("readonly",true);
}else{
$("#commission").attr("readonly",false);
}
});
var listVar = $('input[name=list]').is(":checked");
$('input:radio[name=이름]').is(":checked");
$('input:checkbox[name=이름]').is(":checked");
$("input:radio[name='" + radioName + "']").eq(0).prop("checked", true);■ Select Box 컨트롤
// selectbox 값 고정하기
$("#ty option:selected").val("01");
$("#ty").attr("onChange", 'this.selectedIndex = this.initialSelect');
//선택박스 전체 선택|헤제
$("#checkedAll").click(function(){ //체크박스 전체선택 전체선택 해제
if($("#checkedAll").prop('checked')) {
$(".chk").each(function(){
$(this).not(":disabled").prop("checked", true);
});
} else {
$(".chk").each(function(){
$(this).prop("checked",false);
});
}
});
select 박스 참조 사이트
http://snowple.tistory.com/379
// 선택하기
$("#sAddress > option[value=" + json.sAddress + "]").prop("selected", "true");
$('select.fruit option[value=' + fruit_val + ']').attr('selected', 'selected');
$("#command_work_process").val($("#work_process").val());
//선택된 value 읽기$("#select_box option:selected").val();
$("select[name=selectbox]").val();
jQuery로 선택된 내용 읽기
$("#selectbox option:selected").text();
특정 값인 옵션 지우기
$("#select1 option[value!=1]).remove();
선택 value 빼고 option 모두 지우기
$("[name=네임값] option").not(":selected").remove();
선택된 위치
var index = $("#test option").index($("#test option:selected"));
//선택박스 index 하나 사용 못하게/사용가능하게 .. form전송전에 반드시 풀어주어야함...
document.getElementById("state").options[0].disabled = true;
document.getElementById("state").options[0].disabled = false;
// 셀렉트 박스 옵션에 추가(기존 옵션 뒤쪽으로 추가)
$("#myselect").append("<option value='1'>Apples</option>");
$("#myselect").append("<option value='2'>After Apples</option>");
// 옵션 시작 부분(맨 앞에) 추가
$("#myselect").prepend("<option value='0'>Before Apples</option>");
// 옵션값을 새롭게 정의
$("#myselect").html("<option value='1'>Some oranges</option><option value='2'>More Oranges</option><option value='3'>Even more oranges</option>");
// 옵션값의 인덱스 번호를 변경
$("#myselect option:eq(1)").replaceWith("<option value='2'>Some apples</option>");
$("#myselect option:eq(2)").replaceWith("<option value='3'>Some bananas</option>");
// 2번 인덱스의 값을 선택된 상태로 변경
$("#myselect option:eq(2)").attr("selected", "selected");
$("#qc_classify option:eq(0)").prop("selected",true);
// value의 텍스트 내용으로 선택된 상태로 변경
$("#myselect").val("Some oranges").attr("selected", "selected");
// value 값으로 selected 속성 주기
$("#셀렉트ID").val("1");
//선택박스 선택 못하게./선택가능하게
$('#search_dept_cd').attr('disabled', 'true');
$('#gubun').removeAttr("disabled");
// index번호가 0인것을 제거
$("#myselect option:eq(0)").remove();
// 첫번째 옵션 엘리먼트를 제거
$("#myselect option:first").remove();
// 마지막 옵션 엘리먼트를 제거
$("#myselect option:last").remove();
//선택값외에 모든 옵션 제거
$("[name='네임값'] option").not("[value='특정value']").remove();
// 선택된 텍스트 알림으로 보이기
alert($("#myselect option:selected").text());
// 선택된 값 알림으로 보이기
alert($("#myselect option:selected").val());
// 선택된 옵션의 인덱스 번호 보이기
alert($("#myselect option").index($("#myselect option:selected")));
// 특정 index 선택
$("#id option:eq(0)").prop("selected", true);
// Alternative way to get the selected item
alert($("#myselect option:selected").prevAll().size());
// 0번 인덱스 다음으로 옵션을 추가
$("#myselect option:eq(0)").after("<option value='4'>Some pears</option>");
// 3번 인덱스 이전에 옵션을 추가
$("#myselect option:eq(3)").before("<option value='5'>Some apricots</option>");
// select 박스의 값이 변경되었을 때 알링으로 값과 텍스트 보이기
$("#myselect").change(function() {
alert($(this).val());
alert($(this).children("option:selected").text());
});
//옵션추가
$("#selectList").append(new Option("option text", "value"));
// option 예외처리
https://nowonbun.tistory.com/569
■ CheckBox 컨트롤
1. checkbox checked 여부:
id인 경우: $('input:checkbox[id="checkbox_id"]').is(":checked") == true
name인 경우: $('input:checkbox[name="checkbox_name"]').is(":checked") == true
2. checkbox 전체 갯수(이 경우는 name인 경우만 가능)
$('input:checkbox[name="checkbox_name"]').length;
3. checkbox 선택된 갯수(이 경우는 name인 경우만 가능)
$('input:checkbox[name="checkbox_name"]:checked').length;
4. checkbox 전체 순회하며 처리(동일한 name으로 여러 개인 경우)
$('input:checkbox[name="checkbox_name"]').each(function(){
this.checked = true; //checked 처리
if(this.checked){
alert(this.value);
}
});
5.checkbox 전체 값을 순회하며, 비교하여 checked 처리
<input type="checkbox" onclick="allcheck(this.checked)" style='width:20px; height:20px;'/>
function allcheck(bool){
$('input:checkbox[name="checkbox_name"]').each(function(){
if(this.value == "비교값"){ //값비고
this.checked = true; //체크처리
}
});
}
6.checkbox value값 가져오기(단일건)
$('input:checkbox[id="checkbox_id"]').val();
7. checkbox checked 처리하기(단일건)
$("input:checkbox[id='ID']").prop("checked", true);
$("input:checkbox[id='make_barcode_"+i+"']").attr("checked", false);
8. checkbox checked 여부 확인(단일건)
$("#checkbox_id").is(":checked");
9. 화면에 존재하는 모든 체크박스 전체선택 및 전체해제
$( document ).ready( function() {
$( '.check-all' ).click( function() {
$( '.chk' ).prop( 'checked', this.checked ); //화면 전체 체크박스 체크표시.
});
});
10. name값으로 체크 박스 모두 체크
$("#checkAll").click(function() {
$("input[name=box]:checkbox").each(function() {
$(this).attr("checked", true);
});
});
11. name 값으로 체크 박스 모두 해제
$("#uncheckAll").click(function() {
$("input[name=box]:checkbox").each(function() {
$(this).attr("checked", false);
});
});
12. name 값으로 체크 되어 있는 값 추출
$("#getCheckedAll").click(function() {
$("input[name=box]:checked").each(function() {
var test = $(this).val();
console.log(test);
});
});
13. name 값으로 선택박스 disabled 아닌것만 체크하게 하기
$("input[name=delChkbox]").not(":disabled").attr("checked", "checked");
14. disable on,off
$("input#user_pr_v1").removeAttr("disabled");
$("input#user_pr_v1").attr("disabled", true);
15. 전체 선택, 해제
//리스트 전체선택 체크박스 클릭
$("#allCheck").click(function(){
//만약 전체 선택 체크박스가 체크된상태일경우
if($("#allCheck").prop("checked")) {
$("input[type=checkbox]").prop("checked",true); //체크 실행
} else {
$("input[type=checkbox]").prop("checked",false);
}
});
// 체크박스 선택된값을 back단에 넘기기 전 hidden input 값 처리
function custSelectedHidden(){
var codeIdArr = [];
var codeNmArr = [];
$(".select_cust").each(function(index, item) {
if( $(this).val() != undefined ){ codeIdArr.push($(this).val()); }
var cust_nm = $("#select_nm_"+ $(this).val() ).val();
if( cust_nm != undefined ){ codeNmArr.push( cust_nm ); }
});
$("#select_cust_id_list").val(codeIdArr);
$("#select_cust_nm_list").val(codeNmArr);
}
//체크된것 갯수
var tmpChkCnt = $(".tmpChkbox:checked").length;
// 기본 형식
$(Selector[attr])
value 동일한 개체 선택 $(Selector[attr="value"])
value와 불일치 하는 개체 선택 $(Selector[attr!="value"])
value로 시작하는 개체 선택 $(Selector[attr^="value"])
value 로 끝나는 값 선택 $(Selector[attr$="value"])
value가 포함하는 값 선택 $(Selector[attr*="value"])
value가 포함하는 값 선택 $(Selector[attr~="value"])
예)
<- 태그가 input태그이고 id값이 chk_mileage으로 시작하는 개체 선택!
$("input[id^='chk_mileage']")
$(this).find("[name$='.objtvAnswDs']").attr("name", "eventQuestions[" + i + "].objtvAnswDs");
$(this).find("[id^='objtvAnswDs1_']").attr("id", "objtvAnswDs1_" + i);■ 숫자인지 확인
if(safe_qty.val().isNumeric() == false){
alert('올바르게 입력해주세요.(숫자,소수점 두자리');
safe_qty.focus();
return;
}
자바스크립트에서 isNaN 은 숫자가 아닌 값을 찾는 함수입니다.
출처: https://sometimes-n.tistory.com/34■ input 실시간 변경확인
//INPUT 바인딩 체크
$("#sch_txt").on("propertychange change keyup paste input", function(e) {
var currentVal = $(this).val();
if(currentVal == oldVal) {
return;
}
oldVal = currentVal;
if(currentVal != ""){
barcodeSearch();
}
});■ 입력제한 방법
//javaScript 입력 제한 방법
// 숫자만 허용하기 방법1
$(document).on("keyup", ".comma",
function() {
$(this).number(true);
}
);
// 숫자만 허용하기 방법2
$(".onlynum").keyup(function(){$(this).val( $(this).val().replace(/[^0-9.]/g,"") );} );
// 숫자만 허용하기 방법3
<script type="text/javascript"> $('#inputBox').keypress(function (event) { if (event.which && (event.which <= 47 || event.which >= 58) && event.which != 8) { event.preventDefault(); } }); </script>
====================================================================================================
//PHP 입력제한 방법
// 숫자만 남기기
preg_replace("/[^\d]/i", "", $string);
//숫자만 제거
preg_replace("/[\d]/i", "", $string);
// 특수 문자만 제거
preg_replace("/[ #\&\+\-%@=\/\\\:;,\.'\"\^`~\_|\!\?\*$#<>()\[\]\{\}]/i", "", $string);
//알파벳 빼고 모두 제거
preg_replace("/[^a-z]/i", "", $string);
//한글만 남기고 모두 제거
preg_replace("/[ #\&\+\-%@=\/\\\:;,\.'\"\^`~\_|\!\?\*$#<>()\[\]\{\}0-9a-z]/i", "", $string);
// 비밀번호 정책
<input type="password" name="passwd" pattern="^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*()_-+=[]{}~?:;`|/]).{6,50}$">
■ input 입력후 Enter누르면 함수 실행
<input type=text onkeypress="javascript:if(event.keyCode == 13){document.write('이 구역이 Key 입력 13[enter] 후 실행되는 구간입니다.');}" value="">■ SQL 특수 문자 입력 막기
$(document).on("keyup",".base",
function(){
var value = $(this).val();
var revalue = value.replace(/[?~!%^,;:|\`!\@\#\\\\\'\"]/gi,""); //특수문제 자거
//var revalue2 = revalue.replace( /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g,""); //한글제거
//var revalue3 = revalue.replace(/(\s*)/g, "");
$(this).val(revalue);
}
);■ 소수점 앞에 콤마 넣고 . 하나 이상 입력 막기
//소수점 control
function changeFloat( val ){
var val = String(val);
if( val == "" ){
return "";
}else if(val.indexOf(".") != -1 ){
var arr = val.split(".");
if( arr[1] != "" && Number(arr[1]) > 0 ){
val = arr[0] + "." + arr[1];
}else if( arr[1] != "" && Number(arr[1]) == 0 ) {
val = arr[0];
}else{
val = arr[0] + ".";
}
return val;
}else{
return (val);
}
}
//소수점 control
function viewFloat( val ){
var val = String(val);
if( val == "" ){
return "";
}else if(val.indexOf(".") != -1 ){
var arr = val.split(".");
if( arr[1] != "" && Number(arr[1]) > 0 ){
arr[1] = (arr[1]).replace(/(0+$)/, "");
val = comma(arr[0]) + " ." + arr[1];
}else if( arr[1] != "" && Number(arr[1]) == 0 ) {
val = comma(arr[0]);
}else{
val = comma(arr[0]) + " .";
}
return val;
}else{
return comma(val);
}
}
/**
* 입력 수량 소수점 두째 자리까지 자르기
* @param obj
* @param qty
*/
function qty_key_event2( obj, value ){
// 소수점 자리수 두자리로 제한하기
if(value.indexOf(".") != -1 ) {
var arr = value.split(".");
value = arr[0] + "." + (arr[1]).substr(0, 2);
obj.value = value;
}
}
/**
* 크기 비교
* */
function compareQty( remain_qty , id , input ){
var remain_qty = parseFloat(remain_qty);
var input = parseFloat(input);
if( remain_qty < input ){
alert('수량을 초과하였습니다.');
$("#"+id).val(remain_qty);
}
}■ 콤마 넣기, 콤마풀기
//콤마찍기
function comma(str) {
str = String(str);
return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,');
}
//콤마풀기
function uncomma(str) {
str = String(str);
return str.replace(/,/g, '');
}■ 중복확인
var arr = [];
$(".l_no").each(function() {
if( $(this).val() != undefined ){
arr.push($(this).val());
}
});
var check = "1111";
var idx = jQuery.inArray(check, arr);
if (idx >= 0) {
showAlert("이미 처리된 것");
return false;
} else { }■ 사업자 번호 입력 check
//사업자 번호 입력 check
function bizNoFormatter(num, type) {
var formatNum = '';
try{
if (num.length == 10) {
if (type == 0) {
formatNum = num.replace(/(\d{3})(\d{2})(\d{5})/, '$1-$2-*****');
} else {
formatNum = num.replace(/(\d{3})(\d{2})(\d{5})/, '$1-$2-$3');
}
}
} catch(e) {
formatNum = num;
console.log(e);
}
return formatNum;
}■ 연락처 입력 check
value = value.replace(/[^0-9]/g, "");
$(this).val( value.replace(/(^02.{0}|^01.{1}|[0-9]{3})([0-9]+)([0-9]{4})/,"$1-$2-$3") );
■ textarea 제한
// 입력창: 글자 및 Enter 제한을 위한 처리
$("#voiceCn").keyup(function(e) {
// 1. 최대 1000자 제한
var content = $(this).val();
if (content.length > 1000) {
alert("최대 1000자까지 입력할 수 있습니다.");
$(this).val(content.substring(0, 1000));
$("#textLengthCheck").text("1000");
} else {
$("#textLengthCheck").text(content.length);
}
// 2. enter 시 한 줄당 96자 제한 (96자가 넘어가면 자동으로 줄바꿈 처리)
var maxLengthPerLine = 96;
var newLines = (this.value.match(/\n/g) || []).length;
var lines = this.value.split("\n");
for (var i = 0; i < lines.length; i++) {
var newLine = "";
while (lines[i].length > maxLengthPerLine) {
newLine += lines[i].substring(0, maxLengthPerLine) + "\n";
lines[i] = lines[i].substring(maxLengthPerLine);
}
newLine += lines[i]; // 남은 문자열 추가
lines[i] = newLine;
}
this.value = lines.join("\n");
// 3. enter 횟수 제한
var maxNewLines = 10;
var newLines = (this.value.match(/\n/g) || []).length;
if (newLines > maxNewLines) {
alert("Enter는 최대 10개까지만 입력할 수 있습니다.");
var lines = this.value.split("\n");
this.value = lines.slice(0, maxNewLines + 1).join("\n");
}
});
728x90