Computer >> Máy Tính >  >> Lập trình >> Javascript

Chọn và Bỏ chọn Văn bản Bên trong Một Phần tử bằng JavaScript


Sau đây là mã để chọn và bỏ chọn văn bản bên trong một phần tử bằng JavaScript -

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result {
      font-size: 20px;
      font-weight: 500;
   }
</style>
</head>
<body>
<h1>Select and Deselect Text Inside an Element</h1>
<div style="color: green;" class="result">
Here is some text inside the div
</div>
<button class="Btn">SELECT</button>
<button class="Btn">DESELECT</button>
<h3>Click on the above button to select/de-select text inside the div</h3>
<script>
   let resEle = document.querySelector(".result");
   let BtnEle = document.querySelectorAll(".Btn");
   BtnEle[0].addEventListener("click", () => {
      window.getSelection().selectAllChildren(resEle);
   });
   BtnEle[1].addEventListener("click", () => {
      window.getSelection().removeAllRanges();
   });
</script>
</body>
</html>

Đầu ra

Đoạn mã trên sẽ tạo ra kết quả sau -

Chọn và Bỏ chọn Văn bản Bên trong Một Phần tử bằng JavaScript

Khi nhấp vào nút ‘CHỌN’ -

Chọn và Bỏ chọn Văn bản Bên trong Một Phần tử bằng JavaScript

Khi nhấp vào nút ‘DESELECT’ -

Chọn và Bỏ chọn Văn bản Bên trong Một Phần tử bằng JavaScript