Thuộc tính trình giữ chỗ số đầu vào HTML DOM trả về và sửa đổi giá trị của thuộc tính trình giữ chỗ của trường nhập số.
Cú pháp
Sau đây là cú pháp -
-
Trả lại trình giữ chỗ
object.placeholder
-
Sửa đổi trình giữ chỗ
object.placeholder = “text”
Ví dụ
Hãy để chúng tôi xem một ví dụ về thuộc tính trình giữ chỗ số đầu vào HTML DOM -
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
text-align:center;
color:#fff;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
height:100%;
}
p{
font-weight:700;
font-size:1.1rem;
}
input{
display:block;
width:35%;
border:2px solid #fff;
background-color:transparent;
color:#fff;
font-weight:bold;
padding:8px;
margin:1rem auto;
}
.btn{
background:#0197F6;
border:none;
height:2rem;
border-radius:2px;
width:35%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
</style>
</head>
<body>
<h1>placeholder property Demo</h1>
<p>Hi, Enter your age:</p>
<input type="number" class="numberInput" placeholder="Enter your age">
<button type="button" onclick="change()" class='btn'>Change Placeholder</button>
<script>
function change() {
var numberInput = document.querySelector(".numberInput");
numberInput.placeholder = "Please enter your age";
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhấp vào nút “ Thay đổi Trình giữ chỗ ”Để thay đổi giá trị của trình giữ chỗ.
