JavaScript >> Javascript 文檔 >  >> Tags >> APP

點擊提交按鈕後如何讓文本框的文字消失

我希望我的文本框的文本在我點擊提交按鈕後消失這是我的網站的樣子

這是我的 HTML 腳本:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Ask CodeBlox</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <label>Enter your question:</label><br>
 <textarea type="text" id="myquestion" placeholder="Your question here"></textarea><br>
 <input type="text" id="discord" placeholder="Your discord here"></input><br>
 <button type="button" id="mybutton">Submit</button>

 <script src="script.js"></script>
</body>
</html>

這是我的 CSS 腳本:

body {
 background-color: grey;
}

#myquestion {
 background-color: white;
 border-radius: 1.3mm;
 border-top: grey;
 border-left: grey;
 height: 70mm;
 width: 100mm;
 padding: 8px;
}

#mybutton {
 background-color: lightblue;
 border-radius: 1.3mm;
 border-right: grey;
 border-bottom: grey;
}

#discord {
 background-color: white;
 border-radius: 1.3mm;
 border-top: grey;
 border-left: grey;
 height: 20px;
 width: 50mm;
}

這是我的 javascript 腳本:

document.getElementById("mybutton").onclick = function(){

 var ok = document.getElementById("myquestion").value;
 var no = document.getElementById("discord").value;

 const whurl = "I won't reveal my discord webhook token here"

 const msg = {
 "content": ok + "n" + no
 }


 fetch(whurl, {"method": "POST", "headers": {"content-type": "application/json"}, "body": JSON.stringify(msg)})
 
}

如果您能幫助我,那將非常有幫助。我希望在單擊提交按鈕後文本框的文本消失並且只顯示佔位符文本。如果可能的話,我想知道如何在焦點腳本上製作一個像文本框這樣的腳本,可能就像當文本框被聚焦時,有一個藍色邊框

回答

點擊提交後,您應該檢查表單是否有效,然後使用:

清除您的文本框
document.getElementById("myquestion").value = "";

Tutorial JavaScript 教程
  1. Javascript - 如何克隆一個對象?

  2. 你如何在鼠標懸停(jQuery)上交換 DIV?

  3. CSS 變量組合的力量

  4. 你可能不知道的 5 種 CSS 和 JavaScript 交互方式

  5. Google Chrome 中將 Javascript 插入網站的簡單方法是什麼?

  6. 更新面板刷新後如何運行一些 javascript?

  7. 使用蘋果派理解 Array.prototype.reduce() 和遞歸

  1. 如何填充 SVG 的內部?

  2. 如何隱藏 iPhone 上的地址欄?

  3. Expo + React Native:在兩種視圖的坐標之間畫線

  4. 為什麼我需要在 JavaScript 中將 unix 時間戳乘以 1000?

  5. Uncaught TypeError:undefined is not a function - 初學者 Backbone.js 應用程序

  6. 在javascript中清除localStorage?

  7. 如何將道具傳遞給作為值傳遞的組件

  1. 如何提高 JavaScript 調試技能

  2. 如何將漸進式網絡應用的 Google Lighthouse 分數提高到 100

  3. 想比較laravel中不同表的兩列

  4. 谷歌地圖標籤放置