Dạy thiết kế web - Hướng dẫn thiết kế web, Kỹ thuật thiết kế website

Javacript với thẻ textarea

Xem kết quả: / 2
Bình thườngTuyệt vời 
-         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>
Nguồn http://aweb.vn/xem-thiet-ke-web/47.javacript-voi-the-textarea.html
  
 

Khắc phục lỗi

Công cụ thiết kế website

Top 10 Add-on “hot” cho Firefox Top 10 Add-on “hot” cho Firefox Firefox vẫn nổi tiếng với hệ ...
Tool upload và download từ server Tool upload và download từ server FTP Commander 7.40 - chương trình ...
Một số trang web cung cấp tool online Một số trang web cung cấp tool online 1. Web 2.0 Badges – Tạo badges ...
Tool hỗ trợ làm flash mạnh mẽ nhất Tool hỗ trợ làm flash mạnh mẽ nhất Với SWiSH Max2 bạn có thể ...
Firebug -kiểm tra website Firebug -kiểm tra website Firebug là một công cụ chủ ...

Ebook

Ebooks Flash CS3 (english) Foundation Flash CS3 for Designers What you’ll ...
24h học Action scipts Dưới đây là tài liệu dùng để học action ...
Ebook học JavaScript Ebook học JavaScript bao gồm cả Tiếng Anh và ...
Ebook web nghe nhạc trực tuyến Bạn đang có ý định làm một website nghe ...
Tài liệu tiếng việt về PHP Biên soạn bởi: Mr. Cảnh Phúc Hiệu trưởng ...

Tin tức

Những tên miền Những tên miền "nguy hiểm nhất thế giới" Đó là những tên miền quốc gia Cameroon (.cm), ...
Tạo website trực tuyến, chuyên nghiệp, miễn phí Tạo website trực tuyến, chuyên nghiệp, miễn phí Nhằm phục vụ cho nhu cầu học tập, trao đổi, ...
Thiết kế Website và Làm thế nào để có 1 website ? Thiết kế Website và Làm thế nào để có 1 website ? Để có một website bạn phải tiến hành những ...
Các loại website Các loại website Có rất nhiều loại website nhưng có thể phân ...
Domain là gì ? Domain là gì ? Tên miền (Domain name) là định danh của website ...

Thăm dò

Bạn quan tâm về website ở điểm nào ?