HOME › học javascript - lập trình javascript cơ bản>>17. form trong javascript

Lấy dữ liệu trong textarea JavaScript

29 tháng 6 ,2022

Hướng dẫn cách lấy dữ liệu trong textarea JavaScript. textarea là một loại input và bạn sẽ biết cách lấy giá trị của input textarea bằng thuộc tính value trong JavaScript sau bài học này.

Tạo textarea trong HTML

Để tạo textarea trong HTML, chúng ta sử dụng tới thẻ input có thuộc tính textarea như sau:

<input type="textarea">

Chúng ta có thể chỉ định chiều rộng của textarea với thuộc tính cols và số hàng của textarea với thuộc tính rows. Chúng ta cũng có thể chỉ định giá trị ban đầu bằng cách viết nó vào giữa cặp <textarea> và </textarea> như sau:

<textarea cols="40" rows="5">Xin chào</textarea>

Xin chào

Chúng ta cũng có thể sử dụng kèm thẻ label để hiển thị dòng ký tự phía trước textarea như sau:

<label>Memo: <textarea rows="5"></textarea></label>

Memo:

Bạn cũng có thể thay đổi vị trí hiển thị của label bằng CSS với thuộc tính vertical-align như sau:

<label>Memo: <textarea rows="5" style="vertical-align:top;"></textarea></label>

Memo:

Lấy dữ liệu trong textarea JavaScript

Để lấy dữ liệu trong input textarea JavaScript, chúng ta sử dụng tới thuộc tính value của HTMLInputElement Object, là đối tượng đại diên cho input Element với cú pháp sau đây:

element.value

Trong đó element là Element chỉ đến textarea được lấy từ trong DOM thông qua một số phương thức, ví dụ như getelementbyid chẳng hạn.

Ví dụ, để lấy dữ liệu trong textarea có id = mytextarea, chúng ta viết như sau:

let element = document.getElementById('mytextarea');
console.log(element.value);

Ngoài ra, chúng ta cũng có thể gán giá trị cho thẻ input textarea trong Javascript sau khi lấy Element chỉ đến textarea đó như sau:

let element = document.getElementById('mytextarea');
element.value = 'Tạm biệt';

Sau đây hãy cùng xem demo lấy dữ liệu trong textarea JavaScript với mã HTML dưới đây:

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>Sample</p>

<p>
<label>Memo: <textarea rows="3" id="nameTextarea" style ="vertical-align:top;"></textarea></label>
<input type="button" value="Check" id="checkButton">
<input type="button" value="Change" id="changeButton">
</p>

<p id="msg"></p>

<script>
function butonClick(){
  msg.innerText = 'Xin chào bạn ' + nameTextarea.value;
}

function changeClick(){
  nameTextarea.value = 'Trời mưa';
}

let nameTextarea = document.getElementById('nameTextarea');
let msg = document.getElementById('msg');

let checkButton = document.getElementById('checkButton');
checkButton.addEventListener('click', butonClick);


let changeButton = document.getElementById('changeButton');
changeButton.addEventListener('click', changeClick);

</script>

</body>
</html>

Với mã lệnh này, chúng ta đã tạo ra một textarea để nhập dữ liệu, một nút check để lấy dữ liệu đã nhập trong textarea, và một nút change để thay đổi giá trị trong textarea.

Bạn có thể nhập dữ liệu vào textarea, sau đó lấy dữ liệu đã nhập trong textarea bằng cách click vào nút check như sau:

Bạn cũng có thể thay đổi giá trị trong textarea bằng cách click vào nút Change như sau:

Bắt sự kiện textarea trong JavaScript

Khi chúng ta nhập ký tự vào trong textarea, sự kiện input sẽ xảy ra. Và sau sau khi nhập dữ liệu vào textarea, nếu chúng ta Tab để chuyển focus rời khỏi textarea, sự kiện change sẽ xảy ra.

Xem thêm: Sự kiện input trong JavaScript
Xem thêm: Sự kiện change trong JavaScript

Do vậy, chúng ta có thể bắt 2 sự kiện này để xử lý textarea.

Ví dụ với sự kiện change:

<label>Họ tên：<input type="textarea" id="nameTextarea"></label>

<script>
function inputChange(){
    // Các xử lý khi sự kiện change xảy ra.
}

let nameTextarea = document.getElementById('nameTextarea');
nameTextarea.addEventListener('change', inputChange);
</script>

Hoặc với sự kiện input:

<label>Họ tên：<input type="textarea" id="nameTextarea"></label>

<script>
function inputChange(){
    // Các xử lý khi sự kiện input xảy ra.
}

let nameTextarea = document.getElementById('nameTextarea');
nameTextarea.addEventListener('input', inputChange);
</script>

Đổi xuống dòng thành thẻ br trong textarea

Trong trường hợp có xuống dòng được người dùng nhập vào textarea, nếu sử dụng thuộc tính value để lấy giá trị thì sẽ nhận được dấu xuống dòng như cũ. Trong một số trường hợp, chúng ta cần phải đổi xuống dòng này thành thẻ <br>, và cách làm sẽ như sau:

let textarea = document.getElementById('textarea');
let text = textare.value;

let textArray = text.split('\n');
let newText = textArray.join('<br>');

Với mã lệnh này, sau khi lấy các văn bản đã nhập vào textarea (bao gồm cả xuống dòng), chúng ta chia các văn bản bởi ký tự xuống dòng \n bằng cách dùng phương thức split, rồi sau đó nối lại các phần bị chia bằng ký tự <br> với phương thức join là xong.

Xem thêm: Tách chuỗi trong JavaScript (split)
Xem thêm: Phương thức join() trong JavaScript

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách lấy dữ liệu trong textarea JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.