位置: 编程技术 - 正文

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

  • 企业税收收入怎么计算
  • 企业的罚款支出包括违约金吗
  • 工业企业应缴纳的税金有哪些
  • 电子承兑提示付款
  • 居间费用超过3%剩余的怎样能拿到手
  • 金税盘开具电子发票后如何保存电子版
  • 2019小微企业10万免税需要如何办理
  • 房地产企业汇缴清算条件
  • 一次性伤残就业赔偿标准
  • 研发新产品成功案例简短
  • 文体活动费用计入什么科目
  • 有限合伙企业无限合伙企业
  • 小规模时取得的专票在一般纳锐人之后可以抵扣吗
  • 开票资料上的电话可以是手机吗?
  • 公司注销后原有债权
  • 税务变更
  • 一年内到期的应收质保金
  • 购买少数股东权益的会计处理
  • 安全生产费用包含哪些
  • 企业研发费用税前抵扣
  • 酷狗云盘是干什么用的
  • WIN10显示缩略图
  • 怎么让资产负债率下降
  • 农民合作社扶持政策
  • mac连不上wifi怎么回事 其他设备却可以
  • 企业所得税汇算清缴补缴税款分录
  • macbookpro任务栏
  • 增值税的滞纳金是多少
  • 暂估入账收入会计分录
  • 清理c盘清理
  • pddocument.load
  • 在php中,字符串有哪些表示形式
  • 失业保险稳岗补贴是给个人的还是给企业的
  • 跨年销货退回账务处理
  • php堆和栈
  • 碧峰峡熊猫基地门票
  • 红字增值税专用发票信息表怎么填
  • 在树洞中休息的英语
  • java web购物系统
  • 应收票据确认坏账怎么处理
  • chrome os安装到u盘
  • springboot aop切面
  • rmt命令 远端磁带传输协议模块
  • xa 事务
  • python语言接收信息的内置函数
  • 英文描述什么是利润表
  • 分公司申请独立账户流程
  • 对公帐户进出帐要交税吗
  • 投资性房地产由成本模式转为公允价值模式
  • 增值税附表3
  • 商品编码原则是指什么
  • 金蝶软件如何新增账套
  • 营业收入计入销售收入吗
  • 结转成本时库存商品是负数
  • 企业跨区变更地址迁入地核验码怎么查询
  • 销货方开具红字发票还用给购买方吗
  • 存货周期怎么计算
  • 银行贴息一般多久能到账
  • 注册资本及构成
  • 外币投资计入什么科目
  • 合同负债属于什么账户
  • 营业外收入的账户结构
  • 金税盘每年服务费可以抵扣吗
  • 哪些行业不适用作业法
  • 农产品加计扣除10%进项税账务处理
  • 离岸银行账户开户
  • 商业会计的任务有哪些
  • mysql 备份和恢复
  • MS DTC 事务管理器无法启动的解决方案
  • centos php apache
  • w10预览版21343下载
  • WINDOWS命令行为什么删除速度很快
  • Win8开启SmartScreen筛选器保护上网安全
  • 打开word显示
  • jQuery实现的AJAX简单弹出层效果代码
  • jQuery实现两个下拉列表关联
  • express的中间件
  • linux的open
  • centos6升级到centos8
  • android installer apk
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设