限制文本框输入中的字符

时间:2012-08-28 17:32:11

标签: javascript html

请好。我正在尝试创建一个设置限制并减少多余的页面(从指定的限制)。示例:限制为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>

4 个答案:

答案 0 :(得分:0)

尝试替换为:

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

答案 1 :(得分:0)

试试这个。如果条件满足则返回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>

答案 2 :(得分:0)

不是从文本区域中删除多余的字符,而是可以防止首字母被写入

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>

答案 3 :(得分:0)

文本输入的maxlength属性对于如此少的字符不起作用的任何原因?在你的情况下,你会有:

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

或者如果HTML5,您仍然可以使用textarea:

<textarea maxlength="3"> ...

然后只有一个标签,表明任何输入都有三个字符的限制。