다중 입력을위한 jQuery 문자 카운터

Question

약 8 개의 텍스트 입력이 있습니다. 그들은 모두 결국 PHP로 연결되지만 사용자가 쉽게 사용할 수 있도록 여러 개의 "질문"을 만들었습니다.

필드가 모두 연결되어 160 문자가 잘린 SMS 환경에서 사용됩니다. jQuery를 사용하여 8 개의 입력을 모두 계산해야만 사용자가 160자를 초과하는지 사용자에게 알릴 수 있습니다.

필자는 문자 카운팅 플러그인을 여러 개 사용하여이 작업을 매우 쉽게 수행 할 수 있지만 여러 입력으로 나뉘 지 않은 단일 텍스트 영역을 염두에두고 작성되었습니다.

나는

<p id="chars-remain"><span>160</span> Characters Remain</p> 

등이 사용

var current_count = parseInt($('#chars-remain span').text()); 

var regex=/^[a-zA-Z0-9\s]+$/; 
if(regex.test($(this).val())){ 
    var current_left = current_count - 1; 
} 

if (current_left <= 0) { 
    $('#chars-remain span').addClass('outOfChars'); 
} else { 
    $('#chars-remain span').removeClass('outOfChars'); 
} 
$('#chars-remain span').text(current_left); 

과 HTML 무언가를 구축하기 시작하지만, 정말 작동하지 않습니다. Delete 키를 사용하면 여전히 총계에 -1로 계산되며 몇 가지 다른 버그가 있습니다. 위의 코드를 사용하여 작동하는지 또는 찾을 수 없거나 시도 할 대상을 더 잘 알 수있는 플러그인이 있습니까?

감사합니다.

/// * 편집 ** \ *

나의 현재 jQuery를이 같은 설정이다 : 즉, 필드에서 사용자 유형으로, 그것이 표시 있도록

$('#form-edit-card input').live('blur keyup',function(e) { 
    $('#howto').hide(); 

    $('#in-firstName').text($('#first_name').val()).show(); 
    $('#in-lastName').text($('#last_name').val()).show(); 
    $('#in-titlePosition').text($('#job_title').val()).show(); 
    $('#in-company').text($('#company_name').val()).show(); 
    if($('#phone_number').val() != "") { $('#in-officePhone').text("o: "+$('#phone_number').val()).show(); } 
    if($('#mobile_number').val() != "") { $('#in-mobilePhone').text("m: "+$('#mobile_number').val()).show(); } 
    $('#in-emailAddress').text($('#email').val()).show(); 
    $('#in-website').text($('#website').val()).show(); 

}); 

이 날 수 있습니다 SMS가 옆에있는 박스에서 어떻게 보이는지 예를 들어 보겠습니다. 따라서 K4emic의 대답을 사용하려고하면 거의 대부분 작동하지만 Office 전화와 휴대 전화에서는 자동으로 'o :'및 'm :'이 추가되므로이 세 개의 추가 문자를 수집 할 방법이 필요합니다. 게다가. 자동으로 추가 된 문자도 계산되도록 입력이 입력 된 후 단락의 문자를 세는 것이 더 합리적 일 수 있습니까?

Answer 1

이것은 트릭을 수행하는 것 같습니다.

$('#form-edit-card input').live('blur keyup',function(e) { 
    $('#howto').hide(); 

    $('#in-firstName').text($('#first_name').val()).show(); 
    $('#in-lastName').text($('#last_name').val()).show(); 
    $('#in-titlePosition').text($('#job_title').val()).show(); 
    $('#in-company').text($('#company_name').val()).show(); 
    if($('#phone_number').val() != "") { $('#in-officePhone').text("o: "+$('#phone_number').val()).show(); } else{ $('#in-officePhone').text('');} 
    if($('#mobile_number').val() != "") { $('#in-mobilePhone').text("m: "+$('#mobile_number').val()).show(); } else{ $('#in-mobilePhone').text('');} 
    $('#in-emailAddress').text($('#email').val()).show(); 
    $('#in-website').text($('#website').val()).show(); 

    var count = 0; 
    $('p.count_me').each(function(i){ 
     count += $(this).text().length; 
    }); 
    $('#credits-remain span').text(count); 
    $('#character_count').val(count); 

    if (count > 120) { 
     $('#credits-remain span').addClass('lowChars'); 
     $('#credits-remain span').removeClass('outOfChars'); 
    } else if (count > 140) { 
     $('#credits-remain span').addClass('outOfChars'); 
     $('#credits-remain span').removeClass('lowChars'); 
    } else { 
     $('#credits-remain span').removeClass('lowChars'); 
     $('#credits-remain span').removeClass('outOfChars'); 
    } 
}); 

Answer 2

내가 생각할 수있는 가장 쉬운 방법은 단순히 숨겨진 필드를 만들고 다른 8 개 필드의 연결된 문자열과 동일하게 값을 동적으로 변경하는 것입니다. 당신은 그 분야의 길이를 취할 수 있습니다.

Answer 3

크기가 제한되고 매번 입력을 재평가해야하는 모든 필드에 대해 리스너를 등록하는 것이 가장 확실한 해결책 인 것 같습니다. 키 입력 콜백 함수는 입력이 입력 필드에 삽입 된 후에 발생하며 keydown 및 keypress는 변경이 이루어지기 전에 발생합니다.

var limited = $('.limited').keyup(function(event) { 

    var length = 0; 
    var contents = ''; 

    limited.each(function(index, element) { 
     length += $(element).val().length; 
     contents += $(element).val(); 
    }); 

    console.log(length); 
    console.log($(this).val()); 
    console.log(contents); 

}); 

Answer 4

나는 이와 비슷한 일을했지만 가장 간단한 방법으로 나는 어떻게 알았습니다. 합계가 149자를 초과 한 다음 160자를 넘을 때도 전체 변경 색상을 만들었습니다.

<form id="form1" method="post" action=""> 
     <input onkeydown="updateDetails();" onkeyup="updateDetails();" type="text" name="company" id="company" /> 
     <input onkeydown="updateDetails();" onkeyup="updateDetails();" type="text" name="delivery" id="delivery" /> 
</form> 
<div id="details-total">Details: 0 characters</div> 


<script type="text/javascript"> 
<!-- 

function updateDetails() { 
    var total1 = document.getElementById('company').value.length; 
    var total2 = document.getElementById('delivery').value.length; 
    var grandTotal = total1+total2; 

    if (grandTotal < 150) { 
     document.getElementById('details-total').innerHTML = '<span style="color: #20851e;">Details: '+grandTotal+' characters (max 160)</span>'; 
    } else if (grandTotal < 161) { 
     document.getElementById('details-total').innerHTML = '<span style="color: #ff7800;">Details: '+grandTotal+' characters (max 160)</span>'; 
    } else { 
     document.getElementById('details-total').innerHTML = '<span style="color: #fa0023; font-weight: bold;">Details: '+grandTotal+' characters (max 160)</span>'; 
    } 
} 

//--> 
</script>