位置: 编程技术 - 正文

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

  • 珠宝饰品在什么地方买
  • 小规模季度不超30万需要交什么税
  • 待处理财产损益借贷方向
  • 进项税发票留抵
  • 企业递延所得税费用的计算公式
  • 有限合伙企业利润先税后分
  • 一般纳税企业可以变更小微企业吗
  • 企业建设项目审批流程
  • 土地使用权入账价值包括哪些
  • 纳税人如何申请享受税收减免优惠
  • 应付账款是负数怎么回事
  • 银行手续费发票怎么开
  • 收到对方开的发票怎么做账
  • 旅行社开具发票
  • 无产权的建筑出售怎么办
  • 城市建设维护税和教育费附加怎么算
  • 稳岗补贴需要交个税吗
  • 单位付款方式
  • 利润表净利润等于科目余额表
  • 咨询者对咨询师产生移情
  • 公司注销过程中如果有纠纷怎么办
  • 商品流通企业会计零售业务核算
  • 出差伙食补贴没发
  • 公司集体旅游会计处理
  • 房地产企业资金监管账户
  • 纳税人拒绝代扣代缴,扣缴义务人应当
  • 进项认证转出 会计得入账吗
  • 鼠标灯亮但是鼠标失灵
  • 初级证书多长时间可以领取?
  • linux 密码重置
  • 房地产企业开发成本结转
  • 存货退回账务处理
  • 在认缴期限内未出资是否违法
  • 石榴石的功效与作用价值
  • 年度确认收入怎么算
  • enter an integer
  • php实现图片上传显示
  • 企业短期借款的债权人均为银行
  • 车间的办公费计入
  • react reducer详解
  • 安装elipse教程
  • Js中操作数组的方法
  • 税务自查报告范文自查报告怎么写
  • 累计折旧累计摊销属于现金流吗
  • 什么是附加税举个例子
  • 收到赔偿金怎么写收据?
  • 企业所得税汇算清缴操作流程
  • 简易征收应纳税额
  • 出售抵债资产账务处理
  • 什么是公允价值变动收益
  • 外经证过期了怎样核销
  • 自来水差额征税申报表填写
  • 年底结账会计要怎么做账
  • 劳务报酬现金流量
  • 防伪税控服务费全额抵扣政策
  • 会计的凭证怎么做账
  • 财务预算怎么做模板
  • sql server错误和使用情况报告
  • ubuntu14.04安装ssh服务
  • centos 安装
  • linux增加命令
  • xp系统怎样设置无线网络连接
  • linux网卡lo
  • 如何在安装未知应用中修改权限
  • win7系统笔记本怎么连接wifi
  • python等于和双等于
  • 批处理自动关闭
  • linux常用脚本代码
  • wordpress单页面店铺
  • nodejs使用视频教程
  • unity3d碰撞检测源码
  • linux shell脚本攻略(第3版)
  • shell 读取
  • java教程
  • python 脚本编写
  • 深圳市税务局陈建新
  • 豪车超过多少钱要多加税
  • 增值税申报表如何导出
  • 如何开具红字发票明细
  • 在哪里查看法律
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设