Tìm hiểu về Javacript

Tìm hiểu về Javacript - Bài 3

Chỉ mục bài viết
Tìm hiểu về Javacript
Bài 2
Bài 3
Bài 4
Bài 5
Bài 6
Bài 7
Tất cả các trang

JPAGE_CURRENT_OF_TOTAL

BÀI 3: JAVACRIPT VỚI THẺ TEXTAREA

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>

<< Lùi - Tiếp theo >>

	Hôm nay	2477
	Hôm qua	2309
	Trong tuần	18683
	Tuần trước	16660
	Trong tháng	72800
	Tháng trước	70507
	Tất cả	3108253

Thiet ke web gia re

Tìm hiểu về Javacript - Bài 3