텍스트 상자 입력의 문자 제한

친절하게하십시오. 한계를 설정하고 지정된 한계에서 초과를 자르는 페이지를 만들려고합니다. 예 : 한도는 3입니다. 그러면 d를 입력하면 abc를 입력합니다. d에 도달하면 abc가 유지됩니다. 내 문제는 그냥 내 이전 입력을 삭제하고 새로운 입력을한다는 것입니다. 당신의 위대한 협력을 기대합니다. 감사. 이것으로 교체텍스트 상자 입력의 문자 제한

<html> 
    <script type="text/javascript"> 

    function disable_btn_limit(btn_name) 
    { 
    /* this function is used to disable and enable buttons and textbox*/ 
    if(btn_name == "btn_limit") 
{ 
     document.getElementById("btn_limit").disabled = true; 
     document.getElementById("ctr_limit_txt").disabled = true; 
     document.getElementById("btn_edit_limit").disabled = false; 
} 
     if(btn_name == "btn_edit_limit") 
{ 
     document.getElementById("btn_limit").disabled = false; 
     document.getElementById("ctr_limit_txt").disabled = false; 
     document.getElementById("btn_edit_limit").disabled = true; 
} 
    } 

    function check_content(txtarea_content) 
    { 
     /*This function is used to check the content*/ 
    // initialize an array 
var txtArr = new Array(); 
     //array assignment 
     //.split(delimiter) function of JS is used to separate 
    //values according to groups; delimiter can be ;,| and etc 
txtArr = txtarea_content.split(""); 
var newcontent = ""; 
var momo = new Array(); 
var trimmedcontent = ""; 
var re = 0; 
var etoits; 
var etoits2; 

    //for..in is a looping statement for Arrays in JS. This is similar to foreach in C# 
    //Syntax: for(index in arr_containter) {} 
for(ind_val in txtArr) 
{ 
    var bool_check = check_if_Number(txtArr[ind_val]) 
    if(bool_check == true) 
    { 
     //DO NOTHING 
    } 
    else 
    { 


     //trim_content(newcontent); 
     newcontent += txtArr[ind_val]; 
     momo[ind_val] = txtArr[ind_val]; 
    } 
} 
var isapa = new Array(); 
var s; 
re = trim_content(newcontent); 

for(var x = 0; x < re - 1; x++){ 

    document.getElementById("txtarea_content").value += momo[x]; 
    document.getElementById("txtarea_content").value = ""; 

} 

    } 
     function trim_content(ContentVal) 
    { 
//This function is used to determine length of content 
//parseInt(value) is used to change String values to Integer data types. 
//Please note that all value coming from diplay are all in String data Type 
var limit_char =parseInt(document.getElementById("ctr_limit_txt").value); 
var eto; 
if(ContentVal.length > (limit_char-1)) 
{ 
    alert("Length is greater than the value specified above: " +limit_char); 
    eto = limit_char ; 
    etoits = document.getElementById("txtarea_content").value; 
    //document.getElementById("txtarea_content").value = "etoits"; 
    return eto; 
    //for(var me = 0; me < limit_char; me++) 
    //{document.getElementById("txtarea_content").value = "";} 
} 
return 0; 
    } 

    function check_if_Number(ContentVal) 
{ 
    //This function is used to check if a value is a number or not 
    //isNaN, case sensitive, JS function used to determine if the values are 
     //numbers or not. TRUE = not a number, FALSE = number 
if(isNaN(ContentVal)) 
{ 
    return false; 
} 
else 
{ alert("Input characters only!"); 
    return true; 
} 
     } 



</script> 
    <table> 
    <tr> 
    <td> 
    <input type="text" name="ctr_limit_txt" id="ctr_limit_txt"/> 
    </td> 
     <td> 
     <input type="button" name="btn_limit" id="btn_limit" value="Set Limit"   onClick="javascript:disable_btn_limit('btn_limit');"/> 
    </td> 
    <td> 
    <input type="button" name="btn_edit_limit" id="btn_edit_limit" value="Edit Limit"  disabled="true" onClick="javascript:disable_btn_limit('btn_edit_limit');"/> 
    </td> 
    </tr> 
     <tr> 
    <td colspan="2"> 
    <textarea name="txtarea_content" id="txtarea_content" onKeyPress="javascript:check_content(this.value);"></textarea> 
    <br> 
    *Please note that you cannot include <br>numbers inside the text area 
    </td> 
</tr> 

    </html>

출처

2012-08-28 Jasper

시도 :

for(var x = 0; x < re - 6; x++){ 
    document.getElementById("txtarea_content").value += momo[x]; 
    document.getElementById("txtarea_content").value = ""; 
}

출처

2012-08-28 17:45:56 avexdesigns

작동하지만 새 입력을 잘라야합니다. 예를 들어 3은 한계이고, "abc"를 누르면 d가 출력되고, "abcd"는 "abc"이어야합니다. @avexdesigns – Jasper

이보십시오. 조건이 만족되면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

<html> 
<head> 
    <script type="text/javascript"> 
     function check_content(){ 
      var text = document.getElementById("txtarea_content").value; 
      if(text.length >= 3){ 
       alert('Length should not be greater than 3'); 
       return false; 
      } else { 
      return true; 
      } 
     } 
    </script> 
</head> 
<body> 
    <div> 
     <textarea name="txtarea_content" id="txtarea_content" onkeypress=" return check_content();"></textarea> 
    </div> 
</body> 
</html>

출처

2012-08-28 17:57:38 Muthukumar

은 작동하지 않습니다. – Jasper

작동합니다. 나는 jsfiddle에서 시뮬레이션을 해보았습니다. http://jsfiddle.net/sbp96/ – Muthukumar

cool! 작동하지만 사용자가 제한을 지정해야합니다. – Jasper

대신 텍스트 영역에서 여분의 문자를 제거, 당신은 (매개 변수는 이벤트) 처음

function check_content(event) { //PARAMETER is the event NOT the content 
    txtarea_content = document.getElementById("txtarea_content").value; //Get the content 

    [...] 

    re = trim_content(newcontent); 

    if (re > 0) { 
     event.preventDefault(); // in case the content exceeds the limit, prevent defaultaction ie write the extra character 
    } 

    /*for (var x = 0; x < re - 1; x++) { 
    document.getElementById("txtarea_content").value += momo[x]; 
    document.getElementById("txtarea_content").value = ""; 
    }*/ 
}

에 기록되는 그리고 HTML에서 문자를 방지 할 수 있습니다 :

<textarea ... onKeyPress="javascript:check_content(event);"></textarea>

출처

2012-08-28 17:58:24

이 작동하지 않습니다. – Jasper

테스트를 거쳤습니다. 예방 기본값을 올바른 위치에 두어야합니다. –

텍스트 입력의 maxlength 속성이 너무 적은 문자로 작동하지 않는 이유는 무엇입니까? 귀하의 경우에는, 당신은 것입니다 :

<input type="text" maxlength="3" />

또는 HTML5, 당신은 여전히 텍스트 영역을 사용할 수있는 경우 :

<textarea maxlength="3"> ...

그리고 그냥 모든 입력에 세 문자 제한을 나타내는 레이블이 있습니다.

출처

2012-08-28 21:43:23 chelmerich

아니요, 제한은 사용자가 설정해야하며 초과 입력은 모두 절단해야합니다. – Jasper

텍스트 상자 입력의 문자 제한

답변

관련 문제