文本框特效:获取焦点时自动清除默认文本 失去焦点重新显示默认文字

最新推荐文章于 2023-05-31 16:03:49 发布
最新推荐文章于 2023-05-31 16:03:49 发布
阅读量3.2k 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/neubuffer/article/details/16900571
版权
本文介绍了一种方法，通过HTML和JavaScript实现文本框获取焦点时自动清除默认文本，失去焦点时重新显示默认文字的效果。利用onfocus和onblur事件，结合条件判断，可以优雅地处理输入框的默认文本显示。
摘要由CSDN通过智能技术生成

代码

<input style="background-image:url(input.gif);background-repeat:no-repeat;padding-left:46px;" type='text' name='keyword' size='23' value='输入关键字' maxlength='50' οnfοcus="if(this.value='输入关键字')this.value=''" οnblur="this.value='输入关键字'"/>

background-image:url(input.gif); 给文本框设置背景图片

οnfοcus="if(this.value='输入关键字 ')this.value='

最低0.47元/天 解锁文章
纳木错
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
textarea焦点的用法实现获取焦点清空失去焦点提示效果
12-09
效果图： 具体实现： 1、textarea标签内容 代码如下: <span xss=removed><tr> <td align=”right” valign=”top”>备注：</td> <td><textarea name=”” id=”remark” cols=”” rows=”” class=”textarea220″ onfocus=”this.className=’textarea220L’;this.onmouseout=”;getAddFocus(‘remark’);” onblur=”this.className=’textarea220′;this
input 每输入一次都会失去焦点需要再次点击才能输入
improvement
08-17 4262
input 每输入一次都会失去焦点需要再次点击才能输入 1.情况描述，就是一个input框输入之后就会自动失去焦点，我需要再次点击获取焦点之后才可以进行下一次输入，并且还是只能输入一次就立马又失去焦点，当然这个input框是循环出来的，具体代码如下： <div class="input-area" v-for="item in inviteeInfoList" :key="item.phone" >
input获取焦点和失去焦点
热门推荐
zilvzsy的博客
07-13 14万+
  js用法： onBlur:当输入框失去焦点后  onFocus:当输入框获得焦点后 onblur 是原生 js 的写法，可以直接写在元素的属性中或者在脚本中定义； &lt;input type="text"  id="demo"  onblur=" demo() " &gt;，或者 &lt;script&gt; function demo(){ //执行的函数  为空则为空 } ...
文本框获得焦点清空文本内容
cg20的专栏
10-12 7828
有时我们在设计网页的时候，可能会遇到这种情况。 当鼠标移到文本框里面或是鼠标放到文本框上面时，文本框里面默认的内容清除，当鼠标离开文本框而里面没有内容的时候，又还原成默认的内容。 小编以前看到别人写了一大堆代码，又是if又是else的，其实很简单就能实现，如下代码 鼠标移到文本框内(onfocus)获得焦点时清空文本内容 鼠标移到文本框上方(onmouseover)获得焦点时清
JavaScript网页特效范例宝典源码
09-04
实例222 改变图片获取焦点时的状态 345 实例223 抖动的图片 346 实例224 鼠标移动放大图片 347 8.3 图片与时间相关操作 349 实例225 定时隐藏图片 349 实例226 根据时间变换页面背景 350 实例227 使图片不停闪烁 352...
程序天下:JavaScript实例自学手册
07-08
3.18 文本框获取焦点弹出下拉框 3.19 文本框简单的单击效果 3.20 文字的打字效果 3.21 文字滚动 3.22 文字滑动 3.23 文字跳动特效 3.24 荧光效果的文本 3.25 文字逐个闪亮-霓虹灯效果 3.26 旋转式的变色文字特效 ...
《程序天下：JavaScript实例自学手册》光盘源码
02-08
3.18 文本框获取焦点弹出下拉框 3.19 文本框简单的单击效果 3.20 文字的打字效果 3.21 文字滚动 3.22 文字滑动 3.23 文字跳动特效 3.24 荧光效果的文本 3.25 文字逐个闪亮-霓虹灯效果 3.26 旋转式的变色文字特效 ...
40个特效
08-19
- **实现方法**：使用 JavaScript 在文本框获取焦点时将光标移到文本末尾。 - **示例代码**： ```html function cc() { var e = event.srcElement; var r = e.createTextRange(); r.moveStart("character", e...
html文本框input表单输入框默认提示信息插件，获得焦点自动清空默认值，失去焦点对比确认默认值
12-02
本插件是为输入用户名的提示信息而写的 功能虽然简单但对于做开发的人来说每次写这几行代码也实属繁琐 所以我就把这几行代码写成了jquery的插件以求以后用起来更加便捷 简单说明： 1 可以自动默认提示信息 若不设置则默认值为：用户名 邮箱 2 当input获得焦点时 input的值会被自动清除；当input失去焦点时 会判断输入值与默认值是否一致 如果一致（或空）则再次显示默认提示信息 若不一致（已输入信息）则input值为所输入值 3 此插件是jquery插件 调用方式为 $ "#xxx" autoTip ; 并可以指定input获得焦点和失去焦点的CSS样式 以下为参数说明 + 参数 @input 入参 json对象 @ dvalue input表单提示默认值 @ tip 默认提示信息样式名class @ tipnone 在指定的input执行click时替换的样式名class + 使用方法: $ "#xxx" autotip ; @ #xxx 为需要提示的input的id">本插件是为输入用户名的提示信息而写的 功能虽然简单但对于做开发的人来说每次写这几行代码也实属繁琐 所以我就把这几行代码写成了jquery的插件以求以后用起来更加便捷 简单说明： 1 可以自动默认提示信息 若不设 [更多]
input中blur失去焦点事件与点击事件冲突的解决方法
出雲无心的博客
11-04 2016
解决的办法: 第一步：在blur的回调函数中加一个定时器setTimout，延迟blur回调函数的执行时间，这样的话虽然在点击div的时候，input的blur行为先被触发，但是由于加了定时器延迟，所以得等到按钮的click回调执行完成后才能执行input的blur行为的回调； 第二步：将click事件改成mousedown事件，因为mousedown行为是鼠标点下去的时候就被触发，而click行为是鼠标点下去再抬起的时候才被触发。 ...
Input框实现聚焦，并解决blur事件与enter事件冲突同时触发两次问题
大石化鸟的博客
01-06 2235
Input框实现聚焦，并解决blur事件与enter事件冲突同时触发两次问题
Input输入内容自动失焦问题
Hellen90912的博客
10-11 1138
‘on-change’:(event)=>{ Params.row.value = event; This.table[params.index] = Params.row }
在浏览器里点击input输入框输入，会展示默认的历史下拉菜单
weixin_43445771的博客
04-11 5105
给input设置autocomplete="off"属性可解决此问题
vue input 点击文本变输入框，失焦后变回文本，解决点击文本时自动获取焦点
qq_47797517的博客
05-31 2124
运行代码发现效果不对如第一张图所示还是没聚焦，开始确认是否是使用v-if导致的，换成v-show，还是不行，最后找百度，结合之前的代码， 终于找到了原因，渲染组件需要时间，但是时间没有JS执行的快；最开始效果是不对的，点击一行单元格，虽然由文本变为输入框了，但是当点击第二行的输入框时，第一行并没有失焦，因为失焦事件加在了input上，当点击时input 并没有聚焦，所以当点击第二个时也没走失焦事件。方法二： 使用setTimeout。方法一：加个指令 v-focus。data中加一个属性。
关于输入框得到焦点时文本框清空,失去焦点时又显示默认文字，值发生改变时不再恢复默认文字的两种方法
wyz1978154331的专栏
08-19 5732
第一种方法： 第二种方法：                             文本框点击时文字消失，失去焦点时文字出现                                                         function addListener(element,e,fn)    {       if(element.addE
jquery 获得焦点的时候，焦点时文本框清空,失去焦点时又显示默认文字
Allen
02-06 9246
$(document).ready(function() {     //each遍历文本框     $(".input").each(function() {         //保存当前文本框的值         var vdefault = this.value;         $(this).focus(function() {             //获得焦点时，如果值
input标签获取焦点时文本框内提示信息清空（并且变换文本框背景颜色
liuyaokai1990的博客
08-04 174
input标签获取焦点时文本框内提示信息清空(并且变换文本框背景颜色)(2011-04-07 23:03:17) 转载▼ 标签： 杂谈 分类： JSP学习笔记 主要是利用javascript中的触发事件onfocus和onblur <script language="javascript" type="text/javascript"> &...
利用焦点事件实现用户输入文本框获得焦点时其提示文字清空，文本框失去焦点时重新显示提示文字。
最新发布
09-27
这样就实现了用户输入文本框获得焦点时其提示文字清空，文本框失去焦点时重新显示提示文字的功能。 ### 回答3： 实现用户输入文本框获得焦点时其提示文字清空，文本框失去焦点时重新显示提示文字的方法如下： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值