JavaScript hộp văn bản

Phương thức “setAttribute()” dùng để gán giá trị cho textbox. Nó được sử dụng để thêm hoặc đặt một thuộc tính cho một phần tử nhất định và đặt cho nó một giá trị. Phương thức này lấy hai tham số làm đối số và cả hai đều bắt buộc

cú pháp

Thực hiện theo cú pháp được đề cập bên dưới cho phương thức setAttribute()

setAttribute ( tên thuộc tính, giá trị thuộc tính );

Ở đây, “attributeValue” là giá trị của thuộc tính có tên được chỉ định

Ví dụ

Trước tiên, chúng tôi sẽ tạo tiêu đề và trường nhập liệu với giá trị giữ chỗ “Văn bản” mặc định. Tiếp theo, thêm một nút sẽ gọi phương thức “myFunction()” khi nó được nhấp vào

< h5 > Nhấp vào nút để xem . value of the text field. h5 >

<input type="text" id="myText" placeholder="Text">

<button onclick="myFunction()">Clickbutton>

Trong tệp JS, xác định một hàm có tên là “myFunction()” và truy cập hộp văn bản bằng phương thức “getElementbyId()”, sau đó đặt giá trị với sự trợ giúp của phương thức “setAttribute()”

function myFunction () {

tài liệu. getElementById("myText").setAttribute('value' , 'LinuxHint');

}

Có thể thấy từ đầu ra rằng khi nhấp vào nút, giá trị của hộp văn bản được đặt là “LinuxHint”

Hãy xem quy trình tiếp theo để gán giá trị cho hộp văn bản

Phương pháp 2. Gán giá trị cho hộp văn bản bằng thuộc tính giá trị văn bản

Có một cách tiếp cận khác để gán giá trị cho hộp văn bản, đó là thuộc tính “giá trị” của văn bản. Theo cách tiếp cận này, bạn chỉ phải gán giá trị cho hộp văn bản bằng thuộc tính giá trị

cú pháp

Sử dụng cú pháp sau để gán giá trị cho hộp văn bản bằng thuộc tính giá trị của thành phần văn bản

value = "Văn bản";

Ví dụ

Ở đây, chúng ta sẽ gán giá trị cho textbox đã tạo ở ví dụ trước. Để làm như vậy, hãy truy cập hộp văn bản trong myFunction() và sau đó, gán giá trị bắt buộc cho hộp văn bản bằng thuộc tính "giá trị"

function myFunction () {

tài liệu. getElementById("myText").giá trị = "LinuxHint";

}

Như bạn có thể thấy đầu ra thành công, hãy gán giá trị cho hộp văn bản

Chúng tôi đã tập hợp các cách tiếp cận đơn giản nhất để gán giá trị cho hộp văn bản bằng JavaScript

Phần kết luận

Để gán giá trị cho hộp văn bản bằng JavaScript, bạn có thể sử dụng phương thức được xác định trước của JavaScript có tên là phương thức setAttribute() hoặc thuộc tính giá trị của thành phần văn bản. Cả hai cách tiếp cận này đều hoạt động hiệu quả để gán giá trị cho hộp văn bản. Bạn có thể chọn một trong số họ theo yêu cầu của bạn. Trong bài đăng này, chúng tôi đã thảo luận về các phương pháp gán giá trị cho hộp văn bản bằng JavaScript với các ví dụ chi tiết

Phần này giải thích ngắn gọn về cách tạo một TextBox đơn giản thông qua các lớp CSS bằng kho lưu trữ khởi động nhanh Essential JS 2

phụ thuộc

Danh sách phụ thuộc sau đây được yêu cầu để sử dụng thành phần TextBox trong ứng dụng của bạn

|-- @syncfusion/ej2-inputs
    |-- @syncfusion/ej2-base

Cài đặt và cấu hình

• Sao chép dự án ứng dụng khởi động nhanh Essential JS 2 từ GitHub và cài đặt các gói npm cần thiết bằng lệnh sau

git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
cd quickstart
npm install

Theo mặc định, dự án được cấu hình với tất cả các phụ thuộc Essential JS 2. Để hiểu rõ hơn, hãy xóa tất cả các phụ thuộc khỏi

git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
cd quickstart
npm install

0 để bắt đầu với thành phần TextBox

git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
cd quickstart
npm install

• Các tệp CSS TextBox có sẵn trong thư mục gói

  git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
  cd quickstart
  npm install

  2. Điều này có thể được tham chiếu trong ứng dụng của bạn bằng đoạn mã sau

git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
cd quickstart
npm install

@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';

Trình tạo tài nguyên tùy chỉnh (CRG) là một công cụ web trực tuyến, có thể được sử dụng để tạo tập lệnh và kiểu tùy chỉnh cho một tập hợp các thành phần cụ thể. Công cụ web này rất hữu ích để kết hợp các tập lệnh và kiểu thành phần được yêu cầu trong một tệp

Thêm phần tử Đầu vào HTML với lớp

git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
cd quickstart
npm install

git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
cd quickstart
npm install

git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
cd quickstart
npm install

Thêm biểu tượng vào TextBox

Bạn có thể tạo một TextBox với biểu tượng dưới dạng một nhóm bằng cách tạo phần tử div cha với lớp

git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
cd quickstart
npm install

git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
cd quickstart
npm install

• Bây giờ, hãy chạy ứng dụng trong trình duyệt bằng lệnh sau

Đầu ra sẽ như sau

    Essential JS 2 TextBox
    
    
    
    
    
    
    
    
    


    
Loading....
    

        

          



    
    

        
        
    




          

        

    

nhãn nổi

TextBox nhãn nổi nhãn nổi phía trên TextBox sau khi lấy nét hoặc điền giá trị vào TextBox

Hộp văn bản trong JavaScript là gì?

Làm cách nào để viết TextBox trong JavaScript?

Làm cách nào để hiển thị TextBox trong JavaScript?

Làm cách nào để thêm giá trị TextBox trong JavaScript?