javacript với thẻ textarea

Thứ ba, 25/11/2014 3:42 PM
 

-         Thẻ <textarea> không có thuộc tính value, tuy nhiên khi tham chiếu đến giá trị của nó, bạn lại sử dụng thuộc tính này như cách tham chiếu đến thẻ input dạng text.

-         Thẻ <textarea> không giới hạn chiều dài chuỗi. Có nghĩa là bạn phải viết một đoạn javacript để khống chế chiều dài người dùng nhập cho phù hợp với chiều dài của cột dữ liệu đã khai báo trong CSDL. Bằng cách thiết kế trang web có hai thẻ <textarea>, thẻ thứ nhất có tên là txtdesc không khai báo giá trị mặc định trong thẻ <textarea>, thẻ thứ hai có tên là txtreq với chuỗi mặc định trong thẻ.

-         Thêm vào đó, bạn có thể thêm một thẻ input dang text để trình bày số kí tự người dùng đã nhập vào thẻ <textarea> có tên txtdesc trên biến cố onkeypress

-         Để kiểm tra chiều dài của thẻ txtdesc, bạn có thể sử dụng thuộc tính length của value.

Ví dụ:
  • kiểm tra chiều dài của thẻ <textarea>
               function checkInput()
                           {
                                    if (document.frmEdit.txtDesc.value=="")
                                    {
                                                alert("Please enter your Description");
                                                document.frmEdit.txtDesc.focus();
                                                return false;
                                    }
                                    if (document.frmEdit.txtDesc.value.length>200)
                                    {
                                                alert("Please enter your Description < 200 characters");                                
                                                document.frmEdit.txtDesc.focus();
                                                return false;
                                    }                                             
                                    return true;
                         }
  • cũng tương tự như các trường hợp kiểm tra dữ liệu trên, trong trường hợp người dùng không nhập dữ liệu vào thẻ txtdesc, hay chuỗi nhập lớn hơn 200 kí tự, trình duyệt xuất hiện thông báo:
 
Tuy nhiên để kiểm tra chiều dài của thẻ textarea, bạn sử dụng tham chiếu txtdesc.value.length, sau đó so sánh chiều dài này với chiều dài được giới hạn, với mục đích ghi chú cho người dùng biết số kí tự họ có thể thêm vào thẻ txtdesc:
Function count ()
{
            Document.frmEdit.txtcount.value=200-document.frmEdit.txtdesc.value.length;
}
Bước kế tiếp bạn sẽ khai báo phương thức count() trên biến cố onkeypress của thẻ txtdesc, trở lại trình duyệt bạn nhập một chuỗi, trong thẻ text có tên txtcount sẽ xuất hiện số kí tự còn lại : 
Để hoàn thiện quá trình javacript tên thẻ textarea mời bạn xem ví dụ dưới đây.
<html>
            <head>
                        <title>Welcome to JavaScript</title>
                        <link rel="stylesheet" type="text/css" href="../style.css">
                        <SCRIPT language=JavaScript>
                           function checkInput()
                           {
                                    if (document.frmEdit.txtDesc.value=="")
                                    {
                                                alert("Please enter your Description");
                                                document.frmEdit.txtDesc.focus();
                                                return false;
                                    }
                                    if (document.frmEdit.txtDesc.value.length>200)
                                    {
                                                alert("Please enter your Description < 200 characters");                                
                                                document.frmEdit.txtDesc.focus();
                                                return false;
                                    }                                             
                                    return true;
                         }
                         //De thuc hien tinh so ky tu con lai, ban nhap doan phuong thuc co ten Count()
                        
                        </script>
            </head>
            <body>
            <div class=text_header>Update Data</div>
            <br>               
           
<table width="288">
 <form name="frmEdit" method="post" action="jsdoreg.php?goto=" onSubmit="return checkInput();">
    <tr>
      <td>Description (maximum 100 characters)</td>
    </tr>
    <tr>
      <td valign="top">
        <textarea name="txtDesc" rows="3" cols="40" class="textbox" onKeyPress="count();"></textarea>
      </td>
    </tr>
    <tr>
      <td valign="top">Job Require (maximum 16,000 characters)</td>
    </tr>
    <tr>
      <td valign="top">
        <textarea name="txtReq" rows="3" cols="40" class="textbox">Please enter your requirement</textarea>
      </td>
    </tr>
    <tr>
      <td align="left" class="text_normal" valign="top"> Characters of Description
        <input type="text" name="txtCount" size="5" maxlength="5" class="textbox">
        <br>
        <input type="submit" style="width=80px" name="Update" value="Update" class="button">
        <input type="reset" name="Reset" value="Reset" class="button">
      </td>
    </tr>
 </form>
</table>
</body>
</html>
 

Bài viết cùng chuyên mục: "Thiết kế html"

Liên hệ