搜索框输入文字时提示内容消失

最简单的方法,<input>placeholder属性

placeholder 属性是 HTML5 中的新属性。

<form action="demo_form.asp" method="get">
  <input type="search" name="user_search" placeholder="Search W3School" />
  <input type="submit" />
</form>

定义和用法
placeholder 属性提供可描述输入字段预期值的提示信息(hint)。

该提示会在输入字段为空时显示,并会在字段获得焦点时消失。

注释:placeholder 属性适用于以下的 类型:text, search, url, telephone, email 以及 password。

输入框内显示提示内容通常是指在用户界面上设置一个占位符(Placeholder),它是一种用户友好的交互方式,用于指导用户如何正确输入信息。在不同的前端技术中,实现方式略有不同。以下是使用HTML和JavaScript设置占位符的基本方法: 1. 使用HTML的`placeholder`属性: ```html <input type="text" name="searchBox" placeholder="请输入内容"> ``` 在这个例子中,当输入框为空且没有获得焦点,它会显示灰色的提示文字“请输入内容”。当用户点击输入框并开始输入提示文字会自动消失。 2. 使用JavaScript动态设置: ```html <input type="text" name="searchBox" id="searchBox"> <script> var searchBox = document.getElementById('searchBox'); searchBox.setAttribute('placeholder', '请输入内容'); </script> ``` 上面的JavaScript代码也可以用来动态地为输入框添加占位符,这段代码会在页面加载完成后设置输入框的`placeholder`属性。 3. 使用CSS和jQuery来创建自定义提示: ```html <input type="text" name="searchBox" id="searchBox"> <style> /* CSS样式 */ .custom-placeholder::before { content: attr(data-placeholder); position: absolute; color: #AAA; } .custom-placeholder:focus::before { content: none; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function(){ $('#searchBox').focusin(function(){ if ($(this).val() == $(this).attr('data-placeholder')) { $(this).val(''); } }).focusout(function(){ if ($(this).val() == '') { $(this).val($(this).attr('data-placeholder')); } }); }); </script> ``` 这种方法使用了jQuery来添加焦点和失焦事件处理器,并使用CSS伪元素`::before`来显示和隐藏自定义样式的占位符。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值