Bạn đang xem : cách hiển thị dữ liệu trong textarea bằng javascript

Giới thiệu

Trong bài viết này, tôi giải thích cách hiển thị dữ liệu trong “vùng văn bản” trong ứng dụng PHP bằng JavaScript. Nếu chúng ta nói về vùng văn bản, thì chúng ta có thể đơn giản nói rằng một vùng văn bản trong một trang web về cơ bản là một hộp văn bản cho phép người dùng nhập một lượng lớn dữ liệu vào đó. Bạn đặt thuộc tính giá trị của vùng văn bản thành văn bản bạn muốn hiển thị. Văn bản sẽ chứa các ký tự trả về và do đó vùng văn bản có thể bắt đầu một dòng mới bất cứ nơi nào nó gặp phải.

Thuộc tính của đối tượng Vùng văn bản

Thuộc tính của vùng văn bản là:

Tài sản
Mô tả

giá trị
Nó chỉ định văn bản trong textarea.

Đoạn mã sau tạo ba hộp kiểm và một vùng văn bản. Các hộp kiểm có id tên và tên riêng tư, sử dụng và giấy phép. Vùng văn bản có tên và id của các chính sách và nó có 40 cột và 6 dòng.

& lt; p & gt; & lt; b & gt; Chọn Cảnh sát mà bạn đồng ý: & lt; b & gt; & lt; / p & gt;

& lt; p & gt; & lt; input type = “checkbox” name = “privacy” id = “privacy” / & gt; Chính sách Bảo mật & lt; / p & gt;

& lt; p & gt; & lt; input type = “checkbox” name = “use” id = “use” / & gt; Chính sách người dùng được chấp nhận & lt; / p & gt;

& lt; p & gt; & lt; input type = “checkbox” name = “license” id = “license” / & gt; Thỏa thuận Giấy phép Người dùng & lt; / p & gt;

& lt; p & gt; & lt; textarea name = “policy” id = “policy” rows = “6” cols = “40” & gt; & lt; / textarea & gt; & lt; / p & gt;

Và đầu ra của nó có dạng:

display-data1-in-text-area.jpg

Mã JavaScript để hiển thị đầu ra trong vùng văn bản

Điều này mô tả mã Java Script xử lý cách hiển thị dữ liệu trong vùng văn bản từ nút hộp kiểm. < br />
Bất cứ khi nào mã JavaScript chạy, mã cho sự kiện onload sẽ đính kèm trình xử lý sự kiện có tên updatePolicies vào lần nhấp của mỗi và mọi hộp kiểm. Trình xử lý sự kiện cập nhật văn bản trong vùng văn bản bất cứ khi nào một trong mỗi hộp kiểm được thay đổi. Sau khi trình xử lý sự kiện onload đính kèm hàm updatePolicies vào sự kiện, nó sẽ gọi hàm updatePolicies để khởi tạo nội dung của vùng văn bản.

Xem Thêm  20 Phím tắt trong Visual Studio Code - phím tắt trong visual studio 2017

Khi hàm updatePloicies chạy, trạng thái hộp kiểm sẽ được lưu trữ trong các biến tương ứng, và trong đoạn mã này, tôi tạo một thông báo có tên biến trống sẽ lưu thông báo sẽ được hiển thị trong vùng văn bản. Nếu một trong các hộp kiểm được chọn thì câu lệnh if sẽ tạo tiêu đề cho một thư và thêm một dòng cho mỗi hộp kiểm được chọn, nếu bạn không chọn bất kỳ hộp kiểm nào thì câu lệnh if sẽ tạo một thông báo cho biết điều đó.

Thông báo sau đó sẽ được tạo, trình xử lý sự kiện lưu thông báo trong giá trị của vùng văn bản và thông báo này sẽ được hiển thị trong vùng văn bản của trang web.

& lt; script & gt;

var $ = function (id) {

trả về document.getElementById (id);

}

var updatePolicies = function () {

var privacy = $ (“quyền riêng tư”). đã kiểm tra;

var use = $ (“use”). đã kiểm tra;

var license = $ (“license”). đã kiểm tra;

var message;

if (quyền riêng tư || sử dụng || giấy phép) {

message = “Bạn đã đồng ý với các chính sách này: \ n \ n”;

if (quyền riêng tư) {

message + = “- Chính sách ưu đãi \ n”;

}

if (sử dụng) {

message + = “- Chính sách sử dụng được chấp nhận \ n”;

}

if (giấy phép) {

message + = “- Hợp đồng cấp phép người dùng \ n”;

}

}

khác {

message = “Bạn không đồng ý với bất kỳ chính sách nào.”;

}

$ (“chính sách”). value = message;

}

window.onload = function () {

$ (“quyền riêng tư”). onclick = updatePolicies;

$ (“sử dụng”). onclick = updatePolicies;

$ (“giấy phép”). onclick = updatePolicies;

updatePolicies ();

}

& lt; / script & gt;

Bây giờ tôi viết mã đầy đủ hiển thị dữ liệu trong vùng văn bản khi các hộp kiểm được chọn.

Ví dụ

& lt; html & gt;

& lt; head & gt;

Xem Thêm  Cách tạo đối tượng trong Java - tạo một đối tượng của một lớp trong java

& lt; script & gt;

var $ = function (id) {

trả về document.getElementById (id);

}

var updatePolicies = function () {

var privacy = $ (“quyền riêng tư”). đã kiểm tra;

var use = $ (“use”). đã kiểm tra;

var license = $ (“license”). đã kiểm tra;

var message;

if (quyền riêng tư || sử dụng || giấy phép) {

message = “Bạn đã đồng ý với các chính sách này: \ n \ n”;

if (quyền riêng tư) {

message + = “- Chính sách ưu đãi \ n”;

}

if (sử dụng) {

message + = “- Chính sách sử dụng được chấp nhận \ n”;

}

if (giấy phép) {

message + = “- Hợp đồng cấp phép người dùng \ n”;

}

}

khác {

message = “Bạn không đồng ý với bất kỳ chính sách nào.”;

}

$ (“chính sách”). value = message;

}

window.onload = function () {

$ (“quyền riêng tư”). onclick = updatePolicies;

$ (“sử dụng”). onclick = updatePolicies;

$ (“giấy phép”). onclick = updatePolicies;

updatePolicies ();

}

& lt; / script & gt;

& lt; / head & gt;

& lt; body & gt;

& lt;? php

? & gt;

& lt; p & gt; & lt; b & gt; Chọn Cảnh sát mà bạn đồng ý: & lt; b & gt; & lt; / p & gt;

& lt; p & gt; & lt; input type = “checkbox” name = “privacy” id = “privacy” / & gt; Chính sách Bảo mật & lt; / p & gt;

& lt; p & gt; & lt; input type = “checkbox” name = “use” id = “use” / & gt; Chính sách người dùng được chấp nhận & lt; / p & gt;

& lt; p & gt; & lt; input type = “checkbox” name = “license” id = “license” / & gt; Thỏa thuận Giấy phép Người dùng & lt; / p & gt;

& lt; p & gt; & lt; textarea name = “policy” id = “policy” rows = “6” cols = “40” & gt; & lt; / textarea & gt; & lt; / p & gt;

& lt; / body & gt;

& lt; / html & gt;

Đầu ra

display-data2-in-text-area.jpg


Xem thêm những thông tin liên quan đến chủ đề cách hiển thị dữ liệu trong textarea bằng javascript

Count Characters in Textarea using JavaScript | Onkeyup Function

alt

  • Tác giả: Knowledge Thrusters
  • Ngày đăng: 2020-10-17
  • Đánh giá: 4 ⭐ ( 9196 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this video tutorial, you will learn how to count characters in textarea using javascript.

    Onkeyup function is used on textarea
    Whenever a key is pressed , javascript function is called and length of textarea value is counted.

    then count is checked with max no of characters, if length is smaller then you can write more letters
    else only upto max characters is written and textrea value substring is passed in value

    textarea
    textarea class=”form-control” id=”description” style=”height: 400px;” placeholder=”Please write 100 words description” onkeyup=”charCount(this)” /textarea
    \r

    script
    function charCount(textarea){
    var max=100;
    var length=textarea.value.length;
    if( length greater than max)
    {
    textarea.value=textarea.value.substring(0,100);
    }
    else{
    $(‘textcount’).text(max – length);
    }

    Count Characters in Textarea using JavaScript | Onkeyup Function

    Stop user from entering maximun characters.

    javascript knowledgethrusters

Hướng dẫn dùng JavaScript để lấy dữ liệu fetch API từ ngân hàng UK

  • Tác giả: hocweb.vn
  • Đánh giá: 5 ⭐ ( 7698 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này, tôi sẽ trình bày một ví dụ đơn giản về cách lấy dữ liệu bằng JavaScript từ API bằng phương thức fetch () và sau đó đổ dữ liệu vào trang web.

Java: Text Area

  • Tác giả: v1study.com
  • Đánh giá: 5 ⭐ ( 8360 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Lớp JTextArea cung cấp một thành phần cho phép hiển thị và nhập nhiều dòng văn bản. Ảnh dưới đây thể hiện một ví dụ về việc sử dụng text để nạp dữ liệu.

One moment, please…

  • Tác giả: quachquynh.com
  • Đánh giá: 3 ⭐ ( 4997 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Sử dụng thẻ input, button và textarea

  • Tác giả: hocjavascript.net
  • Đánh giá: 5 ⭐ ( 7942 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thẻ input được sử dụng để tạo các trường giúp người dùng nhập thông tin vào. Có nhiều loại input khác nhau, trong đó phổ biến là:

Tạo ô nhập liệu TEXTAREA nhiều dòng (multiline text)

  • Tác giả: nentang.vn
  • Đánh giá: 5 ⭐ ( 5760 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tạo ô nhập liệu TEXTAREA nhiều dòng (multiline text).Cung cấp các kiến thức Nền tảng, cơ bản về Lập trình, Lập trình web, Lập trình di động, Cơ sở dữ liệu, Học web, học web cần thơ, đồ án mẫu, bài tập thực hành web…

Các cách hiển thị dữ liệu với JavaScript – Minh Hoàng Blog

  • Tác giả: minhhn.com
  • Đánh giá: 4 ⭐ ( 7295 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Danh sách Python .append () - Cách thêm một mục vào danh sách bằng Python - cách thêm python trong danh sách

By ads_php