input 提示文字

最新推荐文章于 2021-08-20 22:36:07 发布
原创 最新推荐文章于 2021-08-20 22:36:07 发布 · 1.1k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #JavaScript #ViewUI

本文介绍了一种简单的方法来实现在网站文本框中的灰色提示文字效果，该效果会在输入焦点进入时消失，并在失去焦点且未输入内容时重新显示。

大家都见到很多网站的文本框都有灰色提文字，一点即消失，鼠标一开又出现（没填写状态下）用下面这段短短的代码就可以实现啦！

 将这段代码加载input 中！

 

<input id="" name="" value="提示文字" onFocus="if(value=='提示文字'){value='';this.style.color='#000'}" onBlur="if(!value){value='提示文字';this.style.color='#999'}" style="color:#999999" />

 

input文本框里面显示提示信息
11-23
input文本框里面显示提示信息，鼠标点击文本框提示信息自动消失！
input 标签实现输入框带提示文字效果(两种方法)
08-29
input 标签实现输入框带提示文字效果（两种方法） 在 HTML5 和 CSS3 的帮助下，我们可以轻松地实现输入框带提示文字效果，而无需使用 JavaScript。这篇文章将介绍两种方法来实现输入框带提示文字效果。 方法一：...
input提升用户输入信息 当用户点击时 页面消失
itinglight的博客
08-20 1031
方案二 <input type="text" placeholder="请输入内容"> 方案一 <input type="text" value='请输入内容' onfocus="javascript:if(this.value=='请输入内容')this.value='';"> 1、js 方法添加的提示文字不同于 使用 placeholder 属性添加的效果 2、placeholder 属性添加的提示文字，只有输入内容时文字才会消失 3、js 方式添加的提示文字，当光标定位到.
关于input提示文字的几种实现方式
AloneDonkey的专栏
09-19 1万+
$(function(){         $('#txt3').placeholder({word:'请输入提示文字'})     }) /*placeholder.js*/ ~function(){     /**  * PlaceHolder组件  * $(input).placeholder({  *   word:     // @string 提示文本  *
input 框背景提示文字
weixin_34187862的博客
09-26 3472
2019独角兽企业重金招聘Python工程师标准>>> ...
html中input提示文字样式修改的示例代码
11-19
在很多网站上我们都看到input输入框显示提示文字，让我们一起来看看如果在input输入框中显示提示文字。我们只需要在<input>标签里添加：placeholder="提示文字即可"，那么如果要修改提示文字的样式呢？可以...
输入框提示文字上浮
01-16
在UI设计和前端开发中，"输入框提示文字上浮"是一种常见的交互设计方式，它主要体现在当用户聚焦到输入框时，原本显示在输入框内的提示性文字（hint）会浮升到输入框的上方，形成一种清晰的提示效果。这种设计能够...
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
10-29
为了提高用户体验，经常会在表单的输入框（`input`元素）内预设提示性文字，这些文字在用户未输入时显示，一旦用户聚焦输入框开始输入，提示文字应自动消失。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作和...
input数据框显示提示文字代码
qq605053977的博客
03-12 658
input触发点击事件，以及input文字提示
qq_41353397的博客
09-06 2397
html代码: <input id="" name="" type="text" class="choosecase" readonly="" placeholder="请选择…" /> js代码: $(".choosecase").click(function () { })
input文本框输入框智能文字提示
qq_26673953的博客
02-26 1348
html5属性 试试就知道很智能
input requried 提示文字修改
独茧
08-10 1103
<input type = "text" name = "personalInfo" required = 'required' oninvalid = "setCustomValidity('提示文字')" oninput = "setCustomValidity('')" />
input 标签实现输入框带提示文字效果
u014644574的博客
04-10 5300
<input type="text" value="提示内容。。。" onFocus="if(value==defaultValue){value='';this.style.color='#000'}" onBlur="if(!value){value=defaultValue;this.style.color='#999'}" style ="#999;"/> </...
input text 显示文字
秦秋雨的专栏
11-06 2462
placeholder="请输入您搜索的内容"
java.lang.Error: Unresolved compilation problems:解决方案
热门推荐
huangbaokang的博客
07-18 9万+
出现该问题的原因主要是编译等级跟jdk不一致。 先查看你jdk版本 我这里是1.7,设置下Java compiler 和 Project Facets，问题解决！！
如何在input标签中写入提示信息
lalalalalala_的博客
01-04 2万+
在input中写入提示信息，需要用到HTML5中的placeholder属性。
html input文本框 输入框提示（hint）内容的实现
王小磊
06-02 7万+
HTML开发中经常遇到input元素，往往又需要提示使用者输入一定规则的内容，这时最好的一个方法就是在input里面实现一个提示，实现如下方式：输入框为空时提示内容出现，当输入框获得焦点时或输入框不为空时则消失。 1.HTML5引入了新属性placeholder很容易实现 html input 输入框提示（hint）内容的实现 Postcode: 显示提示内容“
HTML-input文本框添加提示文字，填写内容时消失
weixin_34258782的博客
02-20 504
input文本框内添加提示文字，填写内容时消失： 用placeholder属性作为提示语: <input placeholder="提示语..."></input> 转载于:https://www.cnblogs.com/chenking/p/10406338.html...
input提示文字文字
最新发布
12-30
### 关于 `input` 提示文字 (`placeholder`) 的实现方法及样式设置 #### 使用 HTML 和 CSS 设置默认提示文字 通过 HTML 中的 `placeholder` 属性可以直接定义输入框中的默认提示文字： ```html <input type="text" placeholder="请输入您的姓名"> ``` 为了增强用户体验并使界面更加美观，可以通过 CSS 对该提示文字进行样式调整。不同浏览器对于 `placeholder` 样式的处理方式略有差异，因此需要针对不同的渲染引擎编写特定的选择器。 - **Webkit 浏览器 (Chrome, Safari)**: ```css ::-webkit-input-placeholder { /* WebKit browsers */ color: #999; font-style: italic; text-decoration: overline; letter-spacing: 3px; } ``` - **Mozilla Firefox**: ```css :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999; opacity: 1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999; opacity: 1; } ``` - **Internet Explorer**: ```css :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #999; } ``` - **通用写法** 如果希望简化代码量，则可以采用更广泛的兼容性写法： ```css input::placeholder { color: #ccc; font-size: .9em; padding-left: 5px; } ``` 上述代码片段展示了如何改变字体颜色、大小以及内边距等属性[^1][^2]。 #### JavaScript 插件扩展功能 除了基本的样式定制外，还可以利用 JavaScript 或 jQuery 库来创建更为复杂的交互效果。例如 Placeholdem 是一款用于管理占位符显示行为的小型插件，在获得焦点时会逐渐移除提示文本，并在失去焦点且无实际内容的情况下重新展示出来[^4]。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值