input文本框 鼠标点击默认值消失,不输入离开鼠标恢复默认值

最新推荐文章于 2024-04-09 18:47:05 发布
原创 最新推荐文章于 2024-04-09 18:47:05 发布 · 置顶 · 1w 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#input #鼠标点击事件 #鼠标离开消失

本文介绍了一种使用HTML实现的文本框及文本区域自动填充功能。当用户聚焦或离开输入框时，系统会自动清除或恢复提示文字，提升用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.input:

<input name="textfield" type="text" value="点击添入标题" onfocus="if (value =='点击添入标题'){value =''}"onblur="if (value ==''){value='点击添入标题'}"/>

2.textarea:

<textarea name="textarea" cols="80" rows="17" onfocus="if(value=='正文：'){value=''}" onblur="if (value ==''){value='正文：'}"></textarea>


JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
10-22
但当用户点击这个文本框后，我们希望默认提示文本被清空，以便用户可以输入自己的信息。当用户输入的内容被删除后，如果文本框失去焦点，我们希望默认提示文本能够重新显示。这种交互行为能够为用户提供一个清晰的...
jQuery响应鼠标事件并隐藏与显示input默认值
10-25
当用户点击（获得焦点）input元素时，如果当前的值与默认值相同（即用户尚未输入任何内容），则清空该元素的值，从而使默认提示文字消失；而当用户离开（失去焦点）该元素时，如果input元素为空，则将默认值重新填充...
js案例焦点事件。（当鼠标点击输入框,默认值消失,密码验证）
最新发布
2303_76379956的博客
04-09 629
时，同时用户没有在输入框里输入任何数据，让输入框的value值变为输入。时让输入框的value值清空，当鼠标。onfocus（获得焦点）onblur（失去焦点）
文本框默认值 单击后自动消失
司刚军的个人专栏
03-27 1752
var s=document.getElementById("s"); s.onfocus=function(){ if(this.value==this.defaultValue) this.value='' }; s.onblur=function (){ if(/^\s*$/.test(this.value)){ this.value=this.defaultValue; t
点击input，value值消失
flyqingfei的博客
03-13 9532
这是默认的状态： 这是点击后的状态：
JS实现input文本框点击清空及失去焦点恢复默认值
"js实现input文本框点击时文字消失，失去焦点" 在网页设计中，我们经常需要对用户交互进行定制，比如当用户点击输入框时，预设的文字（如“请输入姓名”）应该消失，让用户能够开始输入自己的内容。而当用户离开这...
JS文本框默认值处理详解
10-27
JS文本框默认值处理是前端开发中常见的一种需求，它涉及到在用户与页面进行交互时，对文本框的初始内容进行动态调整，以提升用户体验。在这篇文章中，我们将详细解释如何使用JavaScript来处理文本框的默认值。 首先...
文本框设置默认值和验证提交
11-11
为提供更好的用户体验和数据完整性，我们需要对文本框进行默认值的设置以及提交时的数据验证。本文将详细讲解这两个关键点。 一、文本框设置默认值 文本框的默认值可以通过HTML属性`value`来设定。例如，如果我们...
输入框未输入时，显示默认值，当鼠标点击这个输入框时默认值消失
jiangzh1982的专栏
03-20 1162
  &lt;ww:textfield name="searchresource" size="5" onfocus="this.value=''" value="资源搜索"/&gt;   通过使用onfocus="this.value=''"，对这个效果进行设定
HTML5里的placeholder属性
11-05 1492
HTML5里新引入很多有趣的新特征；有些体现在HTML里，有些是JavaScript API，全部非常的有用。其中我最喜欢的一个特征就是文本框(INPUT)里的placeholder属性。placeholder属性能够让你在文本框里显示提示信息，一旦你在文本框里输入了什么信息，提示信息就会隐藏。你以前可能无数次看到这种效果，但那些大部分是用JavaScript里实现的，而现在，HTML5提供了原生
Html中输入框、文本框点击消失默认的字体
majunzhu的博客
03-28 9653
转：http://blog.sina.com.cn/s/blog_6d4bbf9b0100yp8n.htmlTextarea 单击鼠标 清除默认字 点击文本域 默认内容消失 点击文本框 删除预置内容在留言框、搜索栏或者Email订阅栏中有一段默认的文本，比如“请输入您的内容”，如果你在其中点击（窗体获取焦点），这段默认的文本就会自动消失。1．添加代码方式：&lt;head&gt;….&lt;scr...
input表单文本内容鼠标点击消失，鼠标移走恢复
weixin_30698527的博客
03-12 413
第一种，最简单的办法 就是直接在input表单里加上 onfocus="this.value=''" onblur="this.value=''"即<input type="text" value="1111" onfocus="this.value=''" onblur="this.value='1111'"/> 第二种，用jquery实现：(网上找的例子) js： 代码 ...
让输入框显示默认内容
依旧00的专栏
01-01 3798
在最近的一个网站项目中用到了搜索框和文本框，感觉网上那种文本框中有默认内容，当鼠标点击时消失的效果很不错就用到了自己的项目中。 以下是源码： function clearDefault(el) { if (el.defaultValue==el.value) el.value = “” } 初始值是非空的： 点击文本域上方
input输入框默认文字，点击消失
weixin_30367543的博客
01-16 580
<input type="text" value="请输入用户名" onfocus="if(value=='请输入用户名') {value=''}" onblur="if (value=='') {value='请输入用户名'}"> <html> 　　<head> 　　<title>input test</title> 　　...
用JQuery写的文本框初始值消失的方法
wal1314520的博客
06-26 783
学习JQuery后，自己写的一个简单的文本框初始值消失的方法，提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失，代码如下： $(document).ready(function() { var $obj = $("input[type='text']"); //文本框初始值消失的方法 //提示（hint）会在输入域为空时显示出现，会在输
恢复input之前的值（意思是，修改了input,但不用form的reset方法，单个恢复input修改前的值）
c_4818的专栏
11-02 1753
var productCodeObj =document.getElementById("detailId_PRODUCTCODE");       if("exsit"==msg)       {            alert("产品编号已经存在,请重新录入! ");        }else if("hasLogicDelete"==msg)        {
input鼠标点击提示消失，鼠标点出提示出现
qq_37847102的博客
11-03 1276
用户名* 这是一个输入用户名的 input标签 其实想达到这个效果很简单 只要知道 onfoucus 和 onblur 就可以了 当input获取鼠标焦点时 this.placeholder='' 把input标签置空 获取焦点时再等于想要显示的字就可以了
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值