Thuộc tính size của HTML DOM Input Text

Thuộc tính size của đối tượng Input Text trong HTML DOM trả về hoặc thiết lập chiều rộng hiển thị (số ký tự nhìn thấy) của ô nhập văn bản. Giá trị mặc định là 20 nếu không khai báo.

Cú pháp

Lấy giá trị size

inputTextObject.size

Thiết lập size

inputTextObject.size = số_nguyên

Ví dụ minh họa

Ví dụ dưới đây tăng kích thước hiển thị của ô nhập liệu khi nhấn nút:

<!DOCTYPE html>
<html>
<head>
<title>Input Text size</title>
<style>
  form { width: 70%; margin: 0 auto; text-align: center; }
  * { padding: 2px; margin: 5px; }
  input[type="button"] { border-radius: 10px; }
</style>
</head>
<body>
<form>
  <fieldset>
    <legend>Text-size</legend>
    <label for="textSelect">Họ tên: <input type="text" id="textSelect" size="10"> </label><br> 
    <input type="button" onclick="tangKichThuoc()" value="Tăng độ rộng"> 
    <div id="divDisplay"></div> 
  </fieldset> 
</form> 
<script> 
  var divDisplay = document.getElementById("divDisplay"); 
  var inputText = document.getElementById("textSelect"); 
  function tangKichThuoc() { 
    inputText.size = 30; 
    divDisplay.textContent = 'Độ rộng tăng lên: ' + inputText.size; 
  } 
</script> 
</body> 
</html>

Kết quả

• Ban đầu: ô nhập hiển thị 10 ký tự.
• Sau khi nhấn nút: ô nhập mở rộng thành 30 ký tự.

Mẹo: Thuộc tính size chỉ ảnh hưởng đến giao diện hiển thị, không giới hạn số ký tự người dùng nhập được. Để giới hạn độ dài, dùng thuộc tính maxlength.