javascript - テキストボックス入力の文字制限

Question

仲良くしてください。制限を設定し、（指定された制限から）超過分をカットするページを作成しようとしています。例: 制限は 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>

score 0 · Accepted Answer

これに置き換えてみてください：

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

score 0 · Accepted Answer

テキスト入力の maxlength 属性が文字数が少ない場合に機能しない理由は何ですか? あなたの場合、次のようになります。

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

または HTML5 の場合は、引き続きテキストエリアを使用できます。

<textarea maxlength="3"> ...

そして、任意の入力に 3 文字の制限を示すラベルを付けます。

score 0 · Accepted Answer

これを試して。条件が満たされた場合は 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>

score 0 · Accepted Answer

テキスト領域から余分な文字を削除する代わりに、そもそも文字が書き込まれないようにすることができます

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>

javascript - テキストボックス入力の文字制限

4 に答える 4

Related

Reference