input获取焦点时候value值隐藏，失去焦点的时候显示

最新推荐文章于 2026-08-02 14:01:31 发布
原创 最新推荐文章于 2026-08-02 14:01:31 发布 · 7.1k 阅读 · 4 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
随笔

当前文章被收录于：

随笔
6 篇文章 0 人学习
订阅专栏 查看详情
本文介绍了一种解决HTML输入框中预设值与提示文本冲突的方法，通过使用onfocus和onblur事件来动态切换输入框的内容显示。

我们经常在开发过程中会遇到这样的问题，就是当我们给input添加一个value值时候，会覆盖掉placeholder，但是当我们去修改的时候呢，她本身呢又不会自动的消失，这时候input的另外两个属性就可以派上用场了，获取焦点事件和失去焦点事件：

<input type="text" onfocus="javascript:this.value=''" onblur="javascript:this.value='默认的值'" placeholder="占位符" />

Android性能分析深度指南：Perfetto工具全面解析
郑伟强dev的专栏
05-27 107
本文深入探讨Android性能优化工具Perfetto的应用与实践。作为Google推出的新一代追踪系统，Perfetto整合了CPU调度、内存分配、电池状态等多维度分析功能，通过高性能数据处理和可视化界面帮助开发者定位性能瓶颈。文章系统介绍了Perfetto的架构原理、配置方法和核心功能，包括CPU性能分析、内存泄漏检测等关键技术。通过电商应用卡顿优化的实战案例，展示了如何利用数学建模（如帧时间公式$T_{\text{render}}\leq16.67\text{ms}$）指导性能调优。
基于Simulink的电动汽车动力总成控制策略验证与标定仿真平台
xiaoheshang_123的博客
03-07 135
电动汽车的动力总成（Powertrain）是车辆的核心系统，包括动力电池、电机控制器、逆变器和驱动电机等关键部件。动力总成的控制策略直接影响车辆的动力性能、能耗效率和驾驶体验。为了验证和优化这些控制策略，基于MATLAB/Simulink的仿真平台成为一种高效且经济的解决方案。本项目旨在构建一个完整的基于Simulink的电动汽车动力总成控制策略验证与标定仿真平台，涵盖控制策略建模、性能评估以及参数标定等功能模块，并通过仿真验证系统的有效性。
占位隐藏 html,CSS设置输入框占位符placeholder点击隐藏
weixin_33109551的博客
05-31 2714
在HTML5中可以对文本输入框增加placeholder属性，英文placeholder意思是占位符，用在文本输入框的时候可以友好的显示提示文字，例如下面这个就是常见的文本框提示效果：对于IE浏览器，该属性支持IE10+版本，低版本的IE将不显示这里的提示文字，在IE10+浏览器里，当鼠标点击搜索框或通过键盘获得焦点时，提示文字自动消失，失去焦点时再次显示。在Webkit浏览器(Chrome，Op...
人工智能---什么是Transformer?
智能汽车人的博客
04-27 3915
Transformer是一种强大的神经网络架构，最初由Google的研究人员在论文《Attention is All You Need》中提出，用于自然语言处理任务，特别是在机器翻译方面取得了巨大成功。Transformer的核心思想是完全基于自注意力机制(self-attention mechanism)来实现序列到序列(sequence-to-sequence)的学习。它在自然语言处理（NLP）和其他序列到序列任务中表现出色，逐渐成为该领域的主流模型。近些年也逐渐在自动驾驶领域有所应用。
输入框获取焦点后placeholder文字消失、修改placeholder的样式
angran79676765的专栏
04-28 679
输入框获取焦点后placeholder文字消失： <input placeholder='' onfocus="this.placeholder=''" onblur="this.placeholder='请输入验证码'" > 修改placeholder的样式： /*修改placeholder样式*/ input::-webkit-...
html 隐藏input value值,HTML Input Hidden value用法及代码示例
weixin_33826994的博客
06-03 3158
HTML DOM中的“输入隐藏的值”属性用于设置或返回隐藏的输入字段的value属性的值。 value属性定义输入隐藏字段的默认值。用法:它返回value属性。hiddenObject.value用于设置value属性。hiddenObject.value = text属性值：此属性包含单个值文本，该文本用于指定输入隐藏值的初始值。返回值：它返回一个字符串值，该值表示隐藏输入字段的value属性的...
input值不可变、隐藏input(表单隐藏域)
CV_Di的博客
01-25 5222
input标签值不可变、隐藏标签一、值不可变方法1:readonly方法2:disabledreadonly 和 disabled的区别：二、隐藏\标签(表单隐藏域) 一、值不可变 在写前端页面时，有时候我们需要让<input>标签只能看，但不能更改，就行银行卡号之类的。 那么这个时候就需要让标签的值不可变了，让标签值不可变的方法有两种(readonly，disabled)。 方法1:readonly <form action="#"> <h4>方式一:reado
placeholder 效果的实现，input提示字，获取焦点时消失
weixin_30735391的博客
09-22 522
<!doctype html><html><head><meta charset="utf-8"><title>placeholder 效果的实现</title><script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>&l...
输入框获取焦点时value值隐藏与失去焦点时显示
高先生的猫
12-11 1530
实现需求： 1）输入框获得焦点，提示内容消失，边框过渡动画变色 2）输入框失去焦点，如果内容为空，提示内容恢复，边框变色；如果内容不为空，只有边框过渡动画变色 代码 <input type="text" value="邮箱/ID/手机号" style="font-family:-apple-system, sans-serif; color: #999; outline: none; border: 1px solid #eee; transition: .5s ease;" />.
解决小程序nput内容过长，内容显示不全的问题
lyxgoodLucky的博客
03-23 2471
解决的问题：input内容过长，失去焦点的时候，内容显示不全的 解决方法：失去焦点的时候用view替代input，实现换行，获得焦点的时候隐藏view，显示input
JS显示隐藏文本框内容
每天一个前端小知识~
08-21 3597
问题： 当鼠标点击文本框时，里面的默认文章隐藏，当鼠标离开文本框时，里面的文字显示 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>显示隐藏文本框内容</title> </head> <body> <input type="text" name="" id="" value="手机" /> &l
处理不支持input的placeholder兼容性脚本
Wayne's Blog
10-31 1247
function init_placeholder(){ var i = 1; $("input[placeholder]").each(function(i){ var self = this; var icss = self.currentStyle; var holderId = "hhh_"+(i++);
GUI组件失去焦点行为解析与跨平台实践
最新发布
weixin_30652897的博客
08-02 313
GUI组件的焦点管理是交互设计的核心机制之一，涉及操作系统消息传递、浏览器事件冒泡等底层原理。在跨平台开发中，不同环境对blur事件的处理差异常导致兼容性问题，例如移动端键盘弹出时的焦点保持、Electron窗口级失焦等场景。合理处理失去焦点事件能优化表单验证、无障碍访问等关键用户体验，特别是在金融级表单等对交互可靠性要求极高的领域。通过事件委托优化、React合成事件适配等技术手段，开发者可以构建更健壮的焦点管理系统。本文结合Chrome浏览器特性、iOS WKWebView限制等实际案例，详解从桌面端到
表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的
weixin_30480075的博客
11-03 488
jQuery代码 <input value="请输入用户名" type="text"> <input value="请输入密码" type="text"> <input value="提交" type="submit"> <script> $(function(){ //输入框中文字颜色控制 $("input:no...
textarea标签与input标签在移动端用jquery和原生的js都获取不到值
mao__ge的博客
01-18 923
最近做需求发现用ajax向后台提交数据的时候用js与jquery 在移动端都获取不到textarea标签的value值 (在pc端获取值的时候是正常的) 如上面的这种情况 点击提交的时候 用原生的js 或者是jquery 获取不到 textarea 标签 输入的value值 贴上最原始的代码 &lt;h4&gt;请描述您的问题？&lt;/h4&gt; &lt;textarea id="aa...
Html04_input框中的value/key/placeholder到底是什么
linxwx的博客
02-22 2438
1.input框中的value值到底是什么 value 属性为 input 元素设定值。 input标签有很多类型，也就是type，对于不同的输入类型，value 属性的用法也不同，以下是一些常用type的说明 text： 文本框，input默认的type，不写就是这个，value表示文本框里的值 password：密码框，value表示密码框里的值。 submit：提交按钮，value表示按钮上的文字 button：普通按钮，value表示按钮上的文字 reset：重置按钮，value表示按钮上的文.
输入框获取焦点 显示/隐藏 value
weixin_30284355的博客
04-14 338
HTML： <input type="text" class="hint" id="hint" value="粘贴淘宝、天猫、聚划算的宝贝地址，如:Http://item.taobao.com..." name="q"> JS： $(function() { var inputEl = $('#hint'), defVal = inputE...
解决浏览器中点击input输入框时，placeholder的值不消失的方法
lianwenxiu的博客
02-23 8632
&lt;input type="text" placeholder="请输入" onfocus="this.placeholder=''" onblur="this.placeholder='请输入'"&gt;
input搜索框获取焦点时，placeholder消失
菌哥记录
09-18 9786
/* 点击搜索框获取焦点 placeholder消失-开始 */ /* WebKit browsers */ input:focus::-webkit-input-placeholder { color: transparent; /* transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值 */ } /* Mozilla F
Input 框中的 placeholder 属性获取焦点清空
weixin_45242865的博客
08-17 8587
本人在开发一个微信小程序时，遇到如下问题： input 框获取了焦点，但是 placeholder 属性的值却仍然还在，必须输入任意数据后，该值才会隐藏，这会给用户一种不好的体验效果。 理想效果应为：input 框一旦获取焦点，就隐藏 placeholder 属性的值。 一、在开发微信小程序时的实现方法大致如下： ① wxml 文件中的相关代码 首先在 wxml 文件中为 input 标签设置 onfocus 和 onblur 两个事件，且 placeholder 属性的值从 js 文件中的 data
input元素获取焦点时，placeholder内容清空
Bom_Dom的博客
03-27 1197
在input搜索中，发现用placeholder之后不像value值一样能直接获取焦点清除。 要是在js中用函数的话会比较麻烦，所以可以用这种方法： 会很方便 （注意 单双引号的使用） ...
input标签的隐藏
热门推荐
xiaojian1018的专栏
12-25 2万+
隱藏了，但會佔位置 隱藏了，但不會佔位置
input框输入文本内容，不显示文本，也不聚焦的问题
qq_66037898的博客
02-23 1344
前端踩坑
C++生成二维码源代码DLL工程
C++生成二维码源代码，并封装成DLL。VS2008
MO-358C DDR5 CAMM2, 1.38 MM X 1.00 MM PITCH MICROELECTRONIC ASSEMBLY.pdf
MO-358C DDR5 CAMM2, 1.38 MM X 1.00 MM PITCH MICROELECTRONIC ASSEMBLY.pdf
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值