位置: 编程技术 - 正文

input点击后placeholder中的提示消息消失(inputchange)

编辑:rootadmin

推荐整理分享input点击后placeholder中的提示消息消失(inputchange),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:inputclip,input选项,input:active,input onclick点击button无反应,input选项,input onclick点击button无反应,input onclick点击button无反应,input选项,内容如对您有帮助,希望把文章链接给更多的朋友!

html中,placeholder作为input的一个属性,起到了在输入框中占位并提示的作用。

但是有一些浏览器,如chrome,当鼠标点击输入框时,placeholder的值不消失,只有输入数据才消失,会使前端用户体验大打折扣。

看了很多大神的方法,写了长长的js,看着有点吃力,就想到了下面这种最傻的方法解决了这个问题。

html代码:

鼠标点击input时,placeholder中的提示信息消失:

PlaceHolder的两种实现方式

placeholder属性是HTML5 中为input添加的。在input上提供一个占位符,文字形式展示输入字段预期值的提示信息(hint),该字段会在输入为空时显示。

目前浏览器的支持情况

然而,虽然IE+支持placeholder属性,它的表现与其它浏览器也不一致&#;IE+里鼠标点击时(获取焦点)placeholder文本消失&#;Firefox/Chrome/Safari点击不消失,而是键盘输入时文本消失

input点击后placeholder中的提示消息消失(inputchange)

这相当恶心,如果使用了placeholder属性。产品经理还是不依不饶,会讲为什么IE里是点击的时候提示文本消失,Chrome里却是键盘输入的时候提示文本消失。要求前端工程师改成一样的表现形式。鉴于此,以下两种实现方式均不采用原生的placeholder属性。

两种方式的思路

1.(方式一)使用input的value作为显示文本

2.(方式二)不使用value,添加一个额外的标签(span)到body里然后绝对定位覆盖到input上面

两种方式各有优缺点,方式一占用了input的value属性,表单提交时需要额外做一些判断工作,方式二则使用了额外的标签。

方式一

方式二

方式2 对于以下场景不适合

1. input初始隐藏

  此时无法取到input的offset,继而无法定位span到input上面。

2. 包含input的页面dom结构发生变化

  比如页面里删除了一些元素或添加了一些元素,导致input向上或向下偏移,而此时span则没有偏移(span相对body定位)。这比较恶心,可以考虑把span作为input的兄弟元素,即相对内层div定位(而不是body)。但这样必须强制给外层div添加position:relative,添加后可能会对页面布局产生一定影响。

JavaScript时间操作之年月日星期级联操作 本文实例介绍了JavaScript时间操作之级联日期选择操作的详细代码,分享给大家供大家参考,具体内容如下效果图:具体代码:htmlheadmetahttp-equiv="Content-Ty

javascript实现倒计时跳转页面 很多网页都有类似的效果,那就是经过指定的时间能够跳转到其他页面,如果再人性化一点话,会带有倒计时效果,本章节就介绍一下如何实现此效果

轻松实现js图片预览功能 本文实例讲述了js实现图片预览的方法,自己以前写的一个,代码比较简洁,分享给大家供大家参考。具体如下:一、效果预览效果图:二、实现代码:

标签: inputchange

本文链接地址:https://www.jiuchutong.com/biancheng/383820.html 转载请保留说明!

上一篇:JavaScript程序开发之JS代码放置的位置(javascript要打开吗)

下一篇:JavaScript时间操作之年月日星期级联操作(js 时间轴)

  • 公司房产税如何
  • 生产成本月末有余额怎么结账
  • 增值税发票丢失可以用复印件入账么
  • 抵扣联 发票联
  • 12月工资1月发个税怎么算
  • 社保漏缴1个月怎么补缴
  • 补提上年度所得税影响本年所得税吗
  • 免税项目怎么做账
  • 事业单位财务收支
  • 个体办税务登记需要带什么
  • 其他综合收益为什么要结转
  • 出差过程中招待员工
  • 图书出版行业做账流程
  • 不动产证上宗地图名字错一个字
  • 村集体收入所得税率多少
  • 一般纳税人具备的资格需要哪些条件
  • 跨年多计提折旧的账务处理
  • 工会职工活动支出标准
  • 自产自用设备税务处理
  • 完工转出产成品成本计算
  • php for in
  • winpe怎么安装到u盘
  • 冲红的会计分录
  • 租赁公司收到租赁费发票分录
  • 电脑语言栏不见了,打不出汉字
  • php单例模式demo
  • tepac接口
  • 十分=1
  • 股权投资准备的主要内容
  • 波来古市在哪里
  • 计提城建税是在当月提吗
  • thinkphp django
  • php实现5分钟倒计时
  • php自定义函数实现计算整数的四次方
  • 煤炭贸易公司的业务流程
  • 失业保险金支出项目14项
  • 个人注册投资有限公司
  • 帝国cms使用手册
  • 什么是简易征收?其公式是什么?
  • 同一控制下企业合并发生的审计费用计入
  • 应纳税所得额的各项扣除包括什么
  • sql常用优化技巧
  • 异地设立分公司怎么办理?
  • 公司销售一批物品怎么做
  • 代销手续费如何交增值税m
  • 母公司为子公司承担税费
  • 一般纳税人资格证书怎么查询
  • 应收账款周转率分析
  • 按次缴纳的个人所得税
  • 材料抵扣进项税额
  • 补充养老保险和年金
  • 员工报销停车费计入什么科目
  • 工会经费属于什么会计科目?
  • 购买商品发生的费用计入
  • 哪些税费计入管理费用
  • sql server入门新手教程
  • sql数据库性能
  • sql hash
  • linux介绍视频
  • CentOS6 32/64位安装Adobe Flash Player组件的方法
  • 如何关闭windows更新
  • win8如何更改账户名
  • macbookair屏幕变成横版
  • root linux
  • windows10周年更新
  • Serv-U 构建个人FTP服务器图解
  • win8.1快捷键
  • 锁屏壁纸设置后不显示怎么办
  • cocos2dx入门
  • 举例说明如何为教学搭建支架
  • cocos 2d x
  • opengl矩形
  • nodejs requirejs
  • android性能指标
  • interview分析方法
  • css和js应如何在html中放置
  • python按位与操作
  • 中国烟草一年税收占全国总收入
  • 中华人民共和国刑法
  • 企业所得税忘记计提了做到下个月可以吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设