Peep

마우스 휠로 0 ~ 100까지 숫자 조절이 가능하게 하는 작업을 하게 되었다.

비록 취소되어 사용은 안했지만, 간단하게 검토하던 것을 적어두려고 한다!

처음에는 <input type="number"> 태그를 사용하여 간단히 작업하려고 했는데,

정책상 브라우저 호환에 문제가 있어서 <input type="text"> 태그로 작업을 진행하게 되었다.

HTML

<input id="target" type="text">

jQuery

// Firefox
$('#target').on('wheel', function(e){
   e.preventDefault();
   var num = $(this).val();
   
   if(e.originalEvent.deltaY < 0){
     if(num >= 100) return false;

     console.log('업');
   }else{
     if(num <= 0) return false;

     console.log('다운');
   }
});

// 그 외 브라우저
$('#target').on('mousewheel',function (e) {
      e.preventDefault();
      var num = Number($(this).val());

      if(e.originalEvent.wheelDelta > 0){
        if(num >= 100) return false;
		$(this).val(num + 1);
        console.log('업');
        
      }else{
        if(num <= 0) return false;
        $(this).val(num - 1);

        console.log('다운');
      }
});

Firefox만 스크롤 이벤트의 메서드가 약간 다르기때문에 분기하여 작성했다.

브라우저 체크 후 조건문으로 분기하는 작업이 필요하다.

Javascript

자바스크립트는 예제를 만들기 위해 작성하였기 때문에 크롬만 테스트를 했다.

const target = document.getElementById('target');

target.addEventListener('mousewheel',function (e) {
      e.preventDefault();
      var num = Number(this.value);
                       
      if(e.wheelDeltaY > 0){
        if(num >= 100) return false;
		this.value = num + 1 ;
        console.log('업');
        
      }else{
        if(num <= 0) return false;
		this.value = num - 1 ;
        console.log('다운');
      }
});

예제

See the Pen aRjgGO by leeyoonseo (@okayoon) on CodePen.

JS

userEmail = 'abcdefg@gmail.com';

var id =userEmail.split("@")[0].replace(/(?<=.{1})./gi,"*");
var mail =userEmail.split("@")[1].replace(/(?=.{2})./gi,"*");
userEmail= id+"@"+mail;

alert(userEmail);

결과를 보면

id는 a*****으로 나오고 mail은 ******m으로 나온다.

요청사항이 a*****@********m이었기 때문에 저렇게하는 방법을 찾아봤다.

출처는 아래 주소이며 나는 이 출처를 통해 배움을 얻은 분에게 카페 답변으로 코드를 받았다.<-

http://8boknote.tistory.com/98

근데!!!!!!!!!

사파리에서 정규식이 안 먹더라... ?<= 이 부분에서 문법 에러 탁탁 뱉던데... 

내가 작성한 정규식이 아니라서 고치기 뭐했다.. (물론 못 고침)

그러면서 그냥 간지를 버렸다. 

시간도 촉박...

// 이메일 마스킹 처리
function emailSecurity(userEmail){
  var id = userEmail.split('@')[0];
  var mail = userEmail.split('@')[1];
  
  var maskingId = function(id){
    var splitId = id.substring(0,1);

    for(var i = 1; i < id.length; i++){
        splitId += '*';
    }
    return splitId;
  };

  var maskingMail = function(mail){
    var splitMail = '';

    for(var i = 1; i < mail.length; i++){
        splitMail += '*';
    }
    splitMail += mail.substring(mail.length-1,mail.length);
    return splitMail;
  };

  userEmail = maskingId(id) + '@' + maskingMail(mail);
  
  return userEmail;
}

최소사이즈 체크하여 최소사이즈보다 작으면 최소사이즈 값 삽입하기.

JS

var minimumSizeCheck = function(target,minNum){
  var regNumber = /^[0-9]*$/;
  var val = $(target).val();
  if( val < 700 || val == '' || !regNumber.test(val) ) $(target).val(minNum);
};

$('#width, #height').on('blur',function(){
  minimumSizeCheck('#width','700');
  minimumSizeCheck('#height','400');
});