JavaScript 清除文字框

Anika Tabassum Era 2022年5月10日

JavaScript JavaScript Textbox

JavaScript 中沒有直接的方法或屬性來擦除文字框中的值。基本假設是你想要隱藏或消除預設預覽的佔位符。

在這裡，我們將給出一個使用 JavaScript 清除文字框的示例。

使用 `onfocus` 屬性清除文字框

例如，我們將為輸入文字框設定一個值，通過將其設定為 HTML 屬性 onfocus 來觸發函式 vanish()。稍後在指令碼部分中，我們公開了將接受輸入 id 的 vanish() 函式。

然後我們生成一個簡單的 if 語句，它將檢查值是否為 true 並將值再次設定為空白。

程式碼片段：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    input{
      color:gray;
    }
  </style>
</head>
<body>
  <input type="text" value="Enter value" onfocus="vanish()" id="input">
  <script>
  function vanish(){
    input = document.getElementById("input");
    if(input.value=="Enter value"){
      input.value = '';
    }
  }
  </script>
</body>
</html>

輸出：

使用 onfocus 屬性清除 Textbox1

單擊文字框後，Enter Value 將自動清除。

使用 onfocus 屬性清除 Textbox2.png

Author: Anika Tabassum Era

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn GitHub Facebook

使用 onfocus 屬性清除文字框

相關文章 - JavaScript Textbox

使用 `onfocus` 屬性清除文字框