JavaScript鼠标点到文本框时的提示信息

您可以使用 HTML5 中的 input 标签的 placeholder 属性，来在文本框中显示提示信息。当用户将鼠标放到文本框中时，提示信息会自动消失。例如：

<input type="text" placeholder="请输入您的姓名">

您还可以使用 JavaScript 来动态设置提示信息。例如：

<input type="text" id="nameInput">
<script>
  var nameInput = document.getElementById("nameInput");
  nameInput.onfocus = function() {
    if (nameInput.placeholder === "请输入您的姓名") {
      nameInput.placeholder = "请填写您的真实姓名";
    }
  };
  nameInput.onblur = function() {
    if (nameInput.placeholder === "请填写您的真实姓名") {
      nameInput.placeholder = "请输入您的姓名";
    }
  };
</script>

这段代码会在用户将鼠标放到文本框中时，将提示信息从 "请输入您的姓名" 改为 "请填写您的真实姓名"，当用户离开文本框时，又将提示信息改回 "请输入您的姓名"。

相关问题

JavaScript鼠标点到文本框时出现浮框提示信息

您可以使用 HTML5 中的 input 标签的 title 属性，来在文本框旁边显示浮框提示信息。例如：

<input type="text" title="请输入您的姓名">

当用户将鼠标放到文本框旁边时，会显示浮框提示信息。如果您需要在文本框中显示提示信息，可以使用 JavaScript 和 CSS 来实现。例如：

<div class="input-wrap">
  <input type="text" id="nameInput">
  <div class="tooltip">请输入您的姓名</div>
</div>
<style>
  .input-wrap {
    position: relative;
  }
  .tooltip {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 5px;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    border-top: none;
    z-index: 1;
  }
  .input-wrap:hover .tooltip {
    display: block;
  }
</style>
<script>
  var nameInput = document.getElementById("nameInput");
  var tooltip = document.querySelector(".tooltip");
  nameInput.onfocus = function() {
    tooltip.style.display = "none";
  };
  nameInput.onblur = function() {
    if (nameInput.value === "") {
      tooltip.style.display = "block";
    }
  };
</script>

这段代码会在文本框的下方显示一个提示信息浮框，当用户将鼠标放到文本框旁边时，浮框会显示出来；当用户将鼠标放到浮框上时，浮框仍然显示出来；当用户在文本框中输入内容时，浮框会自动消失。

html 文本框提示信息

要在HTML文本框中显示提示信息，可以使用JavaScript来操控DOM元素。通过引用，可以使用`document.getElementById("tips").innerHTML="提示：" + str;`来将提示信息添加到一个具有id为"tips"的元素中。这将设置该元素的innerHTML属性为提示信息的内容。

如果要调整提示信息的位置，可以使用引用中的代码`document.getElementById("tips").style.left = l + "px";`。其中，变量l表示左侧的位置值。将该代码放在适当的位置，即可调整提示信息的位置。

另外，如果想隐藏提示信息，可以使用引用中的代码`document.getElementById("tips").style.display = 'none';`。将该代码放在需要隐藏提示信息的位置，即可实现隐藏效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [html文本框提示效果的示例代码](https://blog.csdn.net/weixin_36265665/article/details/117736675)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]