Hướng dẫn what is select in javascript? - chọn trong javascript là gì?

Cú pháp

Thông số

None.

Giá trị trả về

Ví dụ

Nhấp vào nút trong ví dụ này để chọn tất cả các văn bản trong phần tử

function selectText[] {
  const input = document.getElementById['text-box'];
  input.focus[];
  input.select[];
}

HTML

Select text

JavaScript

function selectText[] {
  const input = document.getElementById['text-box'];
  input.focus[];
  input.select[];
}

Kết quả

Ghi chú

Gọi

function selectText[] {
  const input = document.getElementById['text-box'];
  input.focus[];
  input.select[];
}

function selectText[] {
  const input = document.getElementById['text-box'];
  input.focus[];
  input.select[];
}

Trong các trình duyệt không được hỗ trợ, có thể thay thế nó bằng một cuộc gọi đến htmlinputelement.setselectionRange [] bằng các tham số 0 và độ dài giá trị của đầu vào:

Xem thêm

Thử nó

Ví dụ trên cho thấy việc sử dụng

function selectText[] {
  const input = document.getElementById['text-box'];
  input.focus[];
  input.select[];
}

function selectText[] {
  const input = document.getElementById['text-box'];
  input.focus[];
  input.select[];
}

function selectText[] {
  const input = document.getElementById['text-box'];
  input.focus[];
  input.select[];
}

function selectText[] {
  const input = document.getElementById['text-box'];
  input.focus[];
  input.select[];
}

function selectText[] {
  const input = document.getElementById['text-box'];
  input.focus[];
  input.select[];
}

function selectText[] {
  const input = document.getElementById['text-box'];
  input.focus[];
  input.select[];
}

Mỗi phần tử

function selectText[] {
  const input = document.getElementById['text-box'];
  input.focus[];
  input.select[];
}

function selectText[] {
  const input = document.getElementById['text-box'];
  input.focus[];
  input.select[];
}

Phần tử

function selectText[] {
  const input = document.getElementById['text-box'];
  input.focus[];
  input.select[];
}

  First Value
  Second Value
  Third Value

  First Value
  Second Value
  Third Value

Bạn có thể làm tổ thêm

function selectText[] {
  const input = document.getElementById['text-box'];
  input.focus[];
  input.select[];
}

  First Value
  Second Value
  Third Value

Để biết thêm các ví dụ, hãy xem các tiện ích mẫu gốc: Nội dung thả xuống.

Thuộc tính

Yếu tố này bao gồm các thuộc tính toàn cầu.

  First Value
  Second Value
  Third Value

Một chuỗi cung cấp một gợi ý cho tính năng tự động hoàn thành của tác nhân người dùng. Xem thuộc tính HTML AutoComplete để biết danh sách đầy đủ các giá trị và chi tiết về cách sử dụng AutoComplete.

  First Value
  Second Value
  Third Value

Thuộc tính Boolean này cho phép bạn chỉ định rằng điều khiển biểu mẫu nên có tiêu điểm đầu vào khi tải trang. Chỉ một phần tử biểu mẫu trong tài liệu có thể có thuộc tính

  First Value
  Second Value
  Third Value

  First Value
  Second Value
  Third Value

Thuộc tính Boolean này chỉ ra rằng người dùng không thể tương tác với điều khiển. Nếu thuộc tính này không được chỉ định, điều khiển kế thừa cài đặt của nó từ phần tử chứa, ví dụ

  First Value
  Second Value
  Third Value

  First Value
  Second Value
  Third Value

Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
    
  

Phần tử

Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
    
  

function selectText[] {
  const input = document.getElementById['text-box'];
  input.focus[];
  input.select[];
}

function selectText[] {
  const input = document.getElementById['text-box'];
  input.focus[];
  input.select[];
}

Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
    
  

function selectText[] {
  const input = document.getElementById['text-box'];
  input.focus[];
  input.select[];
}

Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
    
  

Thuộc tính này cho phép bạn liên kết các phần tử

function selectText[] {
  const input = document.getElementById['text-box'];
  input.focus[];
  input.select[];
}

Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
    
  

Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
    
  

Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
    
  

Thuộc tính Boolean này chỉ ra rằng nhiều tùy chọn có thể được chọn trong danh sách. Nếu nó không được chỉ định, thì chỉ có một tùy chọn có thể được chọn tại một thời điểm. Khi

function selectText[] {
  const input = document.getElementById['text-box'];
  input.focus[];
  input.select[];
}

Thuộc tính này được sử dụng để chỉ định tên của điều khiển.

Thuộc tính Boolean chỉ ra rằng một tùy chọn có giá trị chuỗi không trống phải được chọn.

Nếu điều khiển được trình bày dưới dạng hộp danh sách cuộn [ví dụ: khi

  
    Standard controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
    
  
  
    Custom controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
    
  

Lưu ý: Theo đặc tả HTML, giá trị mặc định cho kích thước phải là

  
    Standard controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
    
  
  
    Custom controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
    
  

  
    Standard controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
    
  
  
    Custom controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
    
  

  
    Standard controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
    
  
  
    Custom controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
    
  

  
    Standard controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
    
  
  
    Custom controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
    
  

Ghi chú sử dụng

Chọn nhiều tùy chọn

Trên máy tính để bàn, có một số cách để chọn nhiều tùy chọn trong phần tử

function selectText[] {
  const input = document.getElementById['text-box'];
  input.focus[];
  input.select[];
}

Người dùng chuột có thể giữ các phím CTRL, lệnh hoặc thay đổi [tùy thuộc vào những gì có ý nghĩa cho hệ điều hành của bạn] và sau đó nhấp vào nhiều tùy chọn để chọn/bỏ chọn chúng.

CẢNH BÁO: Cơ chế chọn nhiều mục không liên tục thông qua bàn phím được mô tả dưới đây dường như chỉ hoạt động trong Firefox. The mechanism for selecting multiple non-contiguous items via the keyboard described below currently only seems to work in Firefox.

Trên MacOS, Ctrl + UP và Ctrl + Down Shortcut xung đột với các phím tắt mặc định của HĐH để điều khiển nhiệm vụ và cửa sổ ứng dụng, do đó bạn sẽ phải tắt chúng trước khi nó hoạt động.

Người dùng bàn phím có thể chọn nhiều mục tiếp giáp bằng cách:

• Tập trung vào phần tử

  function selectText[] {
    const input = document.getElementById['text-box'];
    input.focus[];
    input.select[];
  }
  

  4 [ví dụ: sử dụng tab].
• Chọn một mục ở trên cùng hoặc dưới cùng của phạm vi họ muốn chọn bằng các phím con trỏ lên và xuống để đi lên và xuống các tùy chọn.
• Giữ phím Shift và sau đó sử dụng các phím con trỏ lên và xuống để tăng hoặc giảm phạm vi của các mục được chọn.

Người dùng bàn phím có thể chọn nhiều mục không liên tục bằng cách:

• Tập trung vào phần tử

  function selectText[] {
    const input = document.getElementById['text-box'];
    input.focus[];
    input.select[];
  }
  

  4 [ví dụ: sử dụng tab].
• Chọn một mục ở trên cùng hoặc dưới cùng của phạm vi họ muốn chọn bằng các phím con trỏ lên và xuống để đi lên và xuống các tùy chọn.
• Giữ phím Shift và sau đó sử dụng các phím con trỏ lên và xuống để tăng hoặc giảm phạm vi của các mục được chọn.

Người dùng bàn phím có thể chọn nhiều mục không liên tục bằng cách:

Giữ phím CTRL sau đó bằng cách sử dụng các phím con trỏ lên và xuống để thay đổi tùy chọn chọn "tập trung", tức là, chương trình sẽ được chọn nếu bạn chọn làm như vậy. Tùy chọn chọn "tập trung" được tô sáng bằng một phác thảo chấm, giống như một liên kết tập trung vào bàn phím.

Nhấn không gian để chọn/bỏ chọn các tùy chọn chọn "tập trung".

Kiểu dáng với CSS

• Yếu tố

  function selectText[] {
    const input = document.getElementById['text-box'];
    input.focus[];
    input.select[];
  }
  

  4 nổi tiếng là khó khăn để tạo phong cách hiệu quả với CSS. Bạn có thể ảnh hưởng đến các khía cạnh nhất định như bất kỳ phần tử nào - ví dụ, điều khiển mô hình hộp, phông chữ được hiển thị, v.v. và bạn có thể sử dụng thuộc tính

  body {
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  }
  
  .select:focus {
    border-color: blue;
  }
  
  html body form fieldset#custom div.select[data-multiple] div.header {
    display: none;
  }
  
  html body form fieldset#custom div.select div.header {
    content: "↓";
    display: flex;
    flex: 1;
    align-items: center;
    padding: 0;
    position: relative;
    width: auto;
    box-sizing: border-box;
    border-width: 1px;
    border-style: inherit;
    border-color: inherit;
    border-radius: inherit;
  }
  
  html body form fieldset#custom div.select div.header::after {
    content: "↓";
    align-self: stretch;
    display: flex;
    align-content: center;
    justify-content: center;
    justify-items: center;
    align-items: center;
    padding: 0.5em;
  }
  
  html body form fieldset#custom div.select div.header:hover::after {
    background-color: blue;
  }
  
  .select .header select {
    appearance: none;
    font-family: inherit;
    font-size: inherit;
    padding: 0;
    border-width: 0;
    width: 100%;
    flex: 1;
    display: none;
  }
  
  .select .header select optgroup {
    display: none;
  }
  
  .select select div.option {
    display: none;
  }
  
  html body form fieldset#custom div.select {
    user-select: none;
    box-sizing: border-box;
    position: relative;
    border-radius: 4px;
    border-style: solid;
    border-width: 0;
    border-color: gray;
    width: auto;
    display: inline-block;
  }
  
  html body form fieldset#custom div.select:focus,
  html body form fieldset#custom div.select:hover {
    border-color: blue;
  }
  
  html body form fieldset#custom div.select[data-open] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  
  html body form fieldset#custom div.select[data-open] datalist {
    display: initial;
  }
  
  html body form fieldset#custom div.select datalist {
    appearance: none;
    position: absolute;
    border-style: solid;
    border-width: 1px;
    border-color: gray;
    left: 0;
    display: none;
    width: 100%;
    box-sizing: border-box;
    z-index: 2;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  
  html body form fieldset#custom div.select datalist div.option {
    background-color: white;
    margin-bottom: 1px;
    cursor: pointer;
    padding: 0.5em;
    border-width: 0;
  }
  
  html body form fieldset#custom div.select datalist div.option:hover,
  html body form fieldset#custom div.select datalist div.option:focus,
  html body form fieldset#custom div.select datalist div.option:checked {
    background-color: blue;
    color: white;
  }
  
  html
    body
    form
    fieldset#custom
    div.select
    div.optgroup
    div.option[data-disabled] {
    color: gray;
  }
  
  html
    body
    form
    fieldset#custom
    div.select
    div.optgroup
    div.option[data-checked] {
    background-color: blue;
    color: white;
  }
  
  html body form fieldset#custom div.select div.optgroup div.label {
    font-weight: bold;
  }
  
  html body form fieldset#custom div.select div.optgroup div.option div.label {
    font-weight: normal;
    padding: 0.25em;
  }
  
  html body form fieldset#custom div.select div.header span {
    flex: 1;
    padding: 0.5em;
  }
  

  5 để loại bỏ hệ thống mặc định

  body {
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  }
  
  .select:focus {
    border-color: blue;
  }
  
  html body form fieldset#custom div.select[data-multiple] div.header {
    display: none;
  }
  
  html body form fieldset#custom div.select div.header {
    content: "↓";
    display: flex;
    flex: 1;
    align-items: center;
    padding: 0;
    position: relative;
    width: auto;
    box-sizing: border-box;
    border-width: 1px;
    border-style: inherit;
    border-color: inherit;
    border-radius: inherit;
  }
  
  html body form fieldset#custom div.select div.header::after {
    content: "↓";
    align-self: stretch;
    display: flex;
    align-content: center;
    justify-content: center;
    justify-items: center;
    align-items: center;
    padding: 0.5em;
  }
  
  html body form fieldset#custom div.select div.header:hover::after {
    background-color: blue;
  }
  
  .select .header select {
    appearance: none;
    font-family: inherit;
    font-size: inherit;
    padding: 0;
    border-width: 0;
    width: 100%;
    flex: 1;
    display: none;
  }
  
  .select .header select optgroup {
    display: none;
  }
  
  .select select div.option {
    display: none;
  }
  
  html body form fieldset#custom div.select {
    user-select: none;
    box-sizing: border-box;
    position: relative;
    border-radius: 4px;
    border-style: solid;
    border-width: 0;
    border-color: gray;
    width: auto;
    display: inline-block;
  }
  
  html body form fieldset#custom div.select:focus,
  html body form fieldset#custom div.select:hover {
    border-color: blue;
  }
  
  html body form fieldset#custom div.select[data-open] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  
  html body form fieldset#custom div.select[data-open] datalist {
    display: initial;
  }
  
  html body form fieldset#custom div.select datalist {
    appearance: none;
    position: absolute;
    border-style: solid;
    border-width: 1px;
    border-color: gray;
    left: 0;
    display: none;
    width: 100%;
    box-sizing: border-box;
    z-index: 2;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  
  html body form fieldset#custom div.select datalist div.option {
    background-color: white;
    margin-bottom: 1px;
    cursor: pointer;
    padding: 0.5em;
    border-width: 0;
  }
  
  html body form fieldset#custom div.select datalist div.option:hover,
  html body form fieldset#custom div.select datalist div.option:focus,
  html body form fieldset#custom div.select datalist div.option:checked {
    background-color: blue;
    color: white;
  }
  
  html
    body
    form
    fieldset#custom
    div.select
    div.optgroup
    div.option[data-disabled] {
    color: gray;
  }
  
  html
    body
    form
    fieldset#custom
    div.select
    div.optgroup
    div.option[data-checked] {
    background-color: blue;
    color: white;
  }
  
  html body form fieldset#custom div.select div.optgroup div.label {
    font-weight: bold;
  }
  
  html body form fieldset#custom div.select div.optgroup div.option div.label {
    font-weight: normal;
    padding: 0.25em;
  }
  
  html body form fieldset#custom div.select div.header span {
    flex: 1;
    padding: 0.5em;
  }
  

  5.
• Tuy nhiên, các thuộc tính này không tạo ra kết quả nhất quán trên các trình duyệt và thật khó để làm những việc như dòng các loại phần tử dạng khác nhau với nhau trong một cột. Cấu trúc bên trong của phần tử

  function selectText[] {
    const input = document.getElementById['text-box'];
    input.focus[];
    input.select[];
  }
  

  4 rất phức tạp và khó kiểm soát. Nếu bạn muốn kiểm soát đầy đủ, bạn nên xem xét sử dụng thư viện với các tiện nghi tốt cho các tiện ích hình thức kiểu dáng hoặc thử cuộn menu thả xuống của riêng bạn bằng các yếu tố không đáng kể, JavaScript và Wai-ARIA để cung cấp ngữ nghĩa.

Để biết thêm thông tin hữu ích về kiểu dáng

function selectText[] {
  const input = document.getElementById['text-box'];
  input.focus[];
  input.select[];
}

Kiểu dáng HTML hình thức

Kiểu dáng nâng cao cho các hình thức HTML

Ngoài ra, hãy xem ví dụ "Tùy chỉnh các kiểu chọn" bên dưới để biết ví dụ về bạn có thể thử kiểu dáng

function selectText[] {
  const input = document.getElementById['text-box'];
  input.focus[];
  input.select[];
}

Ví dụ

Chọn cơ bản

Ví dụ sau đây tạo ra một menu thả xuống rất đơn giản, tùy chọn thứ hai được chọn theo mặc định.

Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
    
  

  First Value
  Second Value
  Third Value

• Chọn nâng cao với nhiều tính năng
• Ví dụ sau này phức tạp hơn, hiển thị nhiều tính năng bạn có thể sử dụng trên phần tử

  function selectText[] {
    const input = document.getElementById['text-box'];
    input.focus[];
    input.select[];
  }
  

  4:
• Bạn sẽ thấy điều đó:
• Nhiều tùy chọn có thể chọn vì chúng tôi đã bao gồm thuộc tính
  7.

Thuộc tính

8 chỉ khiến 4 dòng hiển thị tại một thời điểm; Bạn có thể cuộn để xem tất cả các tùy chọn.

Chúng tôi đã bao gồm các yếu tố

  First Value
  Second Value
  Third Value

Tùy chọn "Hamster" bao gồm thuộc tính

  First Value
  Second Value
  Third Value

• Tùy chỉnh các kiểu chọn
• Ví dụ này cho thấy cách bạn có thể sử dụng một số CSS và JavaScript để cung cấp kiểu dáng tùy chỉnh rộng rãi cho hộp

  function selectText[] {
    const input = document.getElementById['text-box'];
    input.focus[];
    input.select[];
  }
  

  4.

Ví dụ này về cơ bản: Not all native features are supported, it's a Proof of Concept. IT starts from standard HTML but the same results can be achieved starting from JSON data, custom HTML, or other solutions.

HTML

  
    Standard controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
    
  
  
    Custom controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
    
  

CSS

body {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

.select:focus {
  border-color: blue;
}

html body form fieldset#custom div.select[data-multiple] div.header {
  display: none;
}

html body form fieldset#custom div.select div.header {
  content: "↓";
  display: flex;
  flex: 1;
  align-items: center;
  padding: 0;
  position: relative;
  width: auto;
  box-sizing: border-box;
  border-width: 1px;
  border-style: inherit;
  border-color: inherit;
  border-radius: inherit;
}

html body form fieldset#custom div.select div.header::after {
  content: "↓";
  align-self: stretch;
  display: flex;
  align-content: center;
  justify-content: center;
  justify-items: center;
  align-items: center;
  padding: 0.5em;
}

html body form fieldset#custom div.select div.header:hover::after {
  background-color: blue;
}

.select .header select {
  appearance: none;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  border-width: 0;
  width: 100%;
  flex: 1;
  display: none;
}

.select .header select optgroup {
  display: none;
}

.select select div.option {
  display: none;
}

html body form fieldset#custom div.select {
  user-select: none;
  box-sizing: border-box;
  position: relative;
  border-radius: 4px;
  border-style: solid;
  border-width: 0;
  border-color: gray;
  width: auto;
  display: inline-block;
}

html body form fieldset#custom div.select:focus,
html body form fieldset#custom div.select:hover {
  border-color: blue;
}

html body form fieldset#custom div.select[data-open] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

html body form fieldset#custom div.select[data-open] datalist {
  display: initial;
}

html body form fieldset#custom div.select datalist {
  appearance: none;
  position: absolute;
  border-style: solid;
  border-width: 1px;
  border-color: gray;
  left: 0;
  display: none;
  width: 100%;
  box-sizing: border-box;
  z-index: 2;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

html body form fieldset#custom div.select datalist div.option {
  background-color: white;
  margin-bottom: 1px;
  cursor: pointer;
  padding: 0.5em;
  border-width: 0;
}

html body form fieldset#custom div.select datalist div.option:hover,
html body form fieldset#custom div.select datalist div.option:focus,
html body form fieldset#custom div.select datalist div.option:checked {
  background-color: blue;
  color: white;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-disabled] {
  color: gray;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-checked] {
  background-color: blue;
  color: white;
}

html body form fieldset#custom div.select div.optgroup div.label {
  font-weight: bold;
}

html body form fieldset#custom div.select div.optgroup div.option div.label {
  font-weight: normal;
  padding: 0.25em;
}

html body form fieldset#custom div.select div.header span {
  flex: 1;
  padding: 0.5em;
}

JavaScript

const selects = custom.querySelectorAll['select'];
for [const select of selects] {
  const div = document.createElement['div'];
  const header = document.createElement['div'];
  const datalist = document.createElement['datalist'];
  const optgroups = select.querySelectorAll['optgroup'];
  const span = document.createElement['span'];
  const options = select.options;
  const parent = select.parentElement;
  const multiple = select.hasAttribute['multiple'];
  function  title[e] {
    const disabled = this.hasAttribute['data-disabled'];
    select.value = this.dataset.value;
    span.innerText = this.dataset.label;
    if [disabled] return;
    if [multiple] {
      if [e.shiftKey] {
        const checked = this.hasAttribute["data-checked"];
        if [checked] {
          this.removeAttribute["data-checked"];
        } else {
          this.setAttribute["data-checked", ""];
        }
      } else {
        const options = div.querySelectorAll['.option'];
        for [let i = 0; i  {
    if [!multiple] {
      const open = this.hasAttribute["data-open"];
      e.stopPropagation[];
      if [open] {
        div.removeAttribute["data-open"];
      } else {
        div.setAttribute["data-open", ""];
      }
    }
  };

  div.onkeyup = [event] => {
    event.preventDefault[];
    if [event.keyCode === 13] {
      div.click[];
    }
  };

  document.addEventListener['click', [e] => {
    if [div.hasAttribute["data-open"]] {
      div.removeAttribute["data-open"];
    }
  }];

  const width = Math.max[...Array.from[options].map[[e] => {
    span.innerText = e.label;
    return div.offsetWidth;
  }]];

  console.log[width];
  div.style.width = `${width}px`;
}
document.forms[0].onsubmit = [e] => {
  const data = new FormData[this];
  e.preventDefault[];
  submit.innerText = JSON.stringify[[...data.entries[]]];
};

Kết quả

Tóm tắt kỹ thuật

function selectText[] {
  const input = document.getElementById['text-box'];
  input.focus[];
  input.select[];
}

  First Value
  Second Value
  Third Value

Xem thêm

• Các sự kiện được bắn bởi

  function selectText[] {
    const input = document.getElementById['text-box'];
    input.focus[];
    input.select[];
  }
  

  4: 2, 3
• Phần tử

  function selectText[] {
    const input = document.getElementById['text-box'];
    input.focus[];
    input.select[];
  }
  

  9
• Phần tử

  
  
    First Value
    Second Value
    Third Value
  
  

  3