位置: 编程技术 - 正文

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 时间轴)

  • 研发费用明细账
  • 小规模纳税人免税会计分录
  • 汇算清缴银行手续费
  • 金税四期已经开始了吗
  • 印花税是当月交当月的吗
  • 停车费可以抵扣个人所得税吗
  • 小企业准则适用于什么企业
  • 税控盘服务费减免税会计分录
  • 收到退税如何记账
  • 怎么理解捐赠支出税前扣除标准计算口径
  • 会计凭证有哪些类型
  • 行政事业性收据上面的角分无是右下划线吗
  • 分税制的内容有哪些?
  • 小规模纳税人按1%征收增值税
  • 借款合同法律规定的表述
  • 企业如何进行利润分配的会记处理
  • 不应抵扣的进项税抵扣了怎么办
  • 营改增施工企业哪些能退
  • 小企业准则适用范围
  • 诉讼费可以入公司账吗
  • 退休人员是否还继续享受社保
  • 预付办公室装修款
  • 股息利高的股票
  • 忘了报税算偷税漏税吗
  • 出口退税远程申报
  • 营业额包括增值税吗
  • 销售,购买
  • 主营业务成本结转方法
  • 小规模纳税人城镇土地使用税减免政策
  • 1697508577
  • 其他权益性无形资产的进项税额抵扣
  • 废品损失的计算公式
  • 企业社会贡献总结怎么写
  • 固定资产清查表
  • 一般纳税人简易计税会计分录
  • 总分类账是什么的依据
  • php sql 教程
  • 零售企业退货分录
  • php 序列化和json性能
  • springboot整合ssm
  • 怎么用ai做vi
  • jmeter接口串联
  • 新版python
  • php多线程编程
  • 公司代扣社保费怎么做账
  • 微信收款怎么做会计分录
  • 所得税申报表上的营业成本怎么填
  • phpcms模板制作教程
  • php验证码源码
  • 织梦系统
  • 支付宝和微信的财务统计
  • 劳务公司账务处理实操
  • 企业收到退回的银行汇票多余款项
  • 个体户员工要签劳动合同吗
  • 单位定期存单利息如何记账
  • 税控抵税怎么做分录
  • 预付账款没有发票吗
  • 暂估入库成本差异
  • 宾馆里面的牙膏收费吗
  • 融资费用包括什么?
  • 微信支付属于现金支付还是转账支付
  • 建筑业营改增后税务问题
  • 所有者权益是什么意思
  • sql排序分组语句
  • mysql用中文字段
  • winxp开机界面后老重启
  • windows帐户登录
  • 如何关闭windows更新
  • mac修改用户名称
  • WINDOWS操作系统属于什么操作系统
  • gain_trickler_3202.exe 进程查询 gain_trickler_3202进程是什么文件
  • 怎么看判断
  • 批处理压缩
  • mac如何打开两个微信
  • Unity3D NGUI UIInput制作输入框屏蔽特殊字符(只允许输入正整数)
  • Android调整按钮位置
  • 云南国家税务局官网登录入口
  • 广州地税局官网办事点
  • 加工销售如何做账
  • 云南4050人员2020最新政策
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设