在文本框輸入中限制字符

請好起來。我正在嘗試創建一個設置限制並削減多餘（從指定限制）的頁面。例如：限制是3.那麼，如果我輸入d，我將輸入abc它必須說它的限制已達到，並且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

酷！它的工作，但用戶應該是一個將指定的限制。 – 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：

<textarea maxlength="3"> ...

然後只是有一個標籤，表示對任何輸入一個三字符的限制。

來源

2012-08-28 21:43:23 chelmerich

nope，限制必須由用戶設置，並且必須剪切任何多餘的輸入。 – Jasper

在文本框輸入中限制字符

回答

相關問題