개발자.. 너란놈..

안녕하세요 오랜만에 적는 블로그 입니다.

프로젝트를 진행하면서 input 파일명에 실제 파일명만 적어두고 실제 파일은 없어도 될 경우가 있는거 같아서 한번 만들어보았습니다.

아래와 같이 적어주시면 input file type에 넣을 수 있습니다.

const myFile = new File(["file"], "파일실제 명", {type: "text", });
const dataTeansfer = new DataTransfer();
dataTeansfer.items.add(myFile);
document.querySelector('#ID').files = dataTeansfer.files;
alert(document.querySelector('#ID').files[0].name);

※ uncontrolled input이라는 에러 문구

    - 해당 value값에 값이 없을 때에 대한 대비책이 없을 때 뜨는 오류 문구
    - 해결방법 : 값이 없을 때 빈 문자를 대신 적용

<input type='text' value={UserName || ''} />

input 박스에 핸드폰 번호 입력 시 

자동으로 숫자길이를 체크하여 하이픈('-')을 자동 입력 해주는 함수 입니다.

//input에서 입력할때 마다 이 함수의 value를 넣어서 return 시켜주면 됩니다.
function _fnMakePhoneForm(value) {

    var vTel = "";
    var vValue = value;
    vValue = vValue.replace(/-/gi, "");

    //자동 하이픈
    if (vValue.length < 4) {
        vTel = vValue;
    }
    else if (vValue.length < 7) {
        vTel += vValue.substr(0, 3);
        vTel += "-";
        vTel += vValue.substr(3);
    }
    else if (vValue.length < 11) {
        vTel += vValue.substr(0, 3);
        vTel += "-";
        vTel += vValue.substr(3, 3);
        vTel += "-";
        vTel += vValue.substr(6);
    } else {
        vTel += vValue.substr(0, 3);
        vTel += "-";
        vTel += vValue.substr(3, 4);
        vTel += "-";
        vTel += vValue.substr(7);
    }

    return vTel;
}

[2021.05.07]

Input 박스에 X 표시를 넣는 방법 입니다.

X 표시를 넣었다고 해서 데이터가 삭제되거나 그러지는 않습니다.

HTML

<input id="TEST_ID" class="input_FontSize form-control form-control-sm " autocomplete="off" type="text" />
<span class="searchclear" style="display:none">X</span>

CSS

.TEST_ID[type=text]:-ms-clear{display: none;}
.searchclear {position: absolute;right: 6px;top: 7px;bottom: 15px;width: 10px;height: 14px;margin: auto;font-size: 15px;cursor: pointer;color: #ccc;background-color: #fff;}

JavaScript (Jquery)

$(document).on("keyup",".searchclear",function () {
	$(".searchclear").toggle(Boolean($(this).val())); //영역 
});

if (true/false) {
  //btn btnJoin
  //css .NO_Access
  $("#btnJoin").removeAttr("disabled");
  $("#btnJoin").removeClass("NO_Access");
} else {
  $("#btnJoin").attr("disabled","disabled");
  $("#btnJoin").addClass("NO_Access");
}

css 

.NO_Access {cursor: not-allowed;opacity:.65;}

간략요약

disable 쓰려고 만들어서 한거같은데 기억은 나지 않음..

그냥 attr disable 써서 input 혹은 원하는 데이터 셀렉터해서 disable 하세요.