본문 바로가기

퍼블리싱/jQeury, Javascript

빈칸넣기 문제(input setting), how to get byte

/**********************************
Part : 빈칸넣기 문제(input setting)
1. input의 갯수만큼 placeholder를 넣어줌
2. 정답을 미리 불러와서, byte값을 구한 후 input에 width값을 뿌려줌
3. 정답이 영어 1글자의 경우 폭이 너무 좁기 때문에 2byte로 설정해줌

**********************************/

var wordArr = ['my','name','is','I','live','in','with','middle school']; // 정답단어들(초급, 중급에만 해당)
var placeholderArr = ['①','②','③','④','⑤','⑥','⑦','⑧','⑨','⑩'] // input placeholders, 총 10까지 있음 필요에 따라 추가바람
var $inputs = $('.inputArea .input'); //인풋들

// 글자 byte구하기
 String.prototype.byteLen = function() {
    var l= 0;

    for(var idx=0; idx < this.length; idx++) {
        var c = escape(this.charAt(idx));

        if( c.length==1 ) l ++;
        else if( c.indexOf("%u")!=-1 ) l += 2;
        else if( c.indexOf("%")!=-1 ) l += c.length/3;
    }

    if(l == 1){l = 2}; //1 byte의 경우

    return l;
};

// input placeholder 넣어줌
// 어드민에서 정답 단어들을 가져오면, 알아서 byte에 맞게 input width값을 뿌려줌
$inputs.each(function(i){
    $(this).css('width',function(){
      return (wordArr[i].byteLen())*30;
    }).attr('placeholder',placeholderArr[i]);
});