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

最新推荐文章于 2023-05-31 16:03:49 发布
最新推荐文章于 2023-05-31 16:03:49 发布
阅读量6.9k 收藏 4
点赞数 2
分类专栏： 随笔
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QTFYING/article/details/53099221
版权

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

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

清风乐鸣
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 关于元素获取焦点(隐藏元素与div)
10-28
为了解决这个问题，可以在让隐藏元素获取焦点之前先将其显示出来。具体做法是修改CSS样式，使得元素可见，然后再调用`focus()`方法。 **示例代码：** ```javascript function process0() { var textbox = ...
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
01-19
input 输入框获得和失去焦点时隐藏或者显示文字我们先看下效果图 输入框默认状态: 输入框获取焦点状态: 大家可以看效果图的搜索输入框，默认显示着“用户名/Email”的提示，当这个 input 输入框获得焦点时，就自动...
占位隐藏 html,CSS设置输入框占位符placeholder点击隐藏
weixin_33109551的博客
05-31 2343
在HTML5中可以对文本输入框增加placeholder属性，英文placeholder意思是占位符，用在文本输入框的时候可以友好的显示提示文字，例如下面这个就是常见的文本框提示效果：对于IE浏览器，该属性支持IE10+版本，低版本的IE将不显示这里的提示文字，在IE10+浏览器里，当鼠标点击搜索框或通过键盘获得焦点时，提示文字自动消失，失去焦点时再次显示。在Webkit浏览器(Chrome，Op...
输入框获取焦点后placeholder文字消失、修改placeholder的样式
angran79676765的专栏
04-28 575
输入框获取焦点后placeholder文字消失： <input placeholder='' onfocus="this.placeholder=''" onblur="this.placeholder='请输入验证码'" > 修改placeholder的样式： /*修改placeholder样式*/ input::-webkit-...
html 隐藏input value值,HTML Input Hidden value用法及代码示例
weixin_33826994的博客
06-03 2833
HTML DOM中的“输入隐藏的值”属性用于设置或返回隐藏的输入字段的value属性的值。 value属性定义输入隐藏字段的默认值。用法:它返回value属性。hiddenObject.value用于设置value属性。hiddenObject.value = text属性值：此属性包含单个值文本，该文本用于指定输入隐藏值的初始值。返回值：它返回一个字符串值，该值表示隐藏输入字段的value属性的...
input值不可变、隐藏input(表单隐藏域)
CV_Di的博客
01-25 4200
input标签值不可变、隐藏标签一、值不可变方法1:readonly方法2:disabledreadonly 和 disabled的区别：二、隐藏\标签(表单隐藏域) 一、值不可变 在写前端页面时，有时候我们需要让<input>标签只能看，但不能更改，就行银行卡号之类的。 那么这个时候就需要让标签的值不可变了，让标签值不可变的方法有两种(readonly，disabled)。 方法1:readonly <form action="#"> <h4>方式一:reado
解决浏览器中点击input输入框时，placeholder的值不消失的方法
lianwenxiu的博客
02-23 8268
&lt;input type="text" placeholder="请输入" onfocus="this.placeholder=''" onblur="this.placeholder='请输入'"&gt;
文本框获得焦点和失去焦点的判断代码
12-09
本文将详细讲解如何利用JavaScript和jQuery来处理文本框的焦点获取与失去事件。 首先，我们来看JavaScript原生的事件绑定。在HTML中，可以直接在`<input>`标签上使用事件处理函数，比如： ```html <input name=”...
easyui textbox失去焦点事件及获取文本框的内容
01-20
EasyUI文本框失去焦点事件和获取文本框内容的实现 EasyUI文本框是一种常用的UI组件，它提供了许多实用的功能，如文本框失去焦点事件和获取文本框内容等。下面我们将详细介绍EasyUI文本框失去焦点事件和获取文本框...
深究AngularJS—如何获取input的焦点（自定义指令）
04-30
当`focusIf`的值变化且变为真时，输入框会自动获取焦点。 总结来说，通过自定义AngularJS指令`focusInput`，我们可以轻松地控制输入元素的焦点行为。同时，理解`$timeout`和`watch`的使用，有助于我们在更复杂的...
placeholder 效果的实现，input提示字，获取焦点时消失
weixin_30735391的博客
09-22 452
<!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...
input元素获取焦点时，placeholder内容清空
Bom_Dom的博客
03-27 1014
在input搜索中，发现用placeholder之后不像value值一样能直接获取焦点清除。 要是在js中用函数的话会比较麻烦，所以可以用这种方法： 会很方便 （注意 单双引号的使用） ...
Input 框中的 placeholder 属性获取焦点清空
weixin_45242865的博客
08-17 8190
本人在开发一个微信小程序时，遇到如下问题： input 框获取了焦点，但是 placeholder 属性的值却仍然还在，必须输入任意数据后，该值才会隐藏，这会给用户一种不好的体验效果。 理想效果应为：input 框一旦获取焦点，就隐藏 placeholder 属性的值。 一、在开发微信小程序时的实现方法大致如下： ① wxml 文件中的相关代码 首先在 wxml 文件中为 input 标签设置 onfocus 和 onblur 两个事件，且 placeholder 属性的值从 js 文件中的 data
input搜索框获取焦点时，placeholder消失
菌哥记录
09-18 9519
/* 点击搜索框获取焦点 placeholder消失-开始 */ /* WebKit browsers */ input:focus::-webkit-input-placeholder { color: transparent; /* transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值 */ } /* Mozilla F
input标签的隐藏
热门推荐
xiaojian1018的专栏
12-25 2万+
隱藏了，但會佔位置 隱藏了，但不會佔位置
input框输入文本内容，不显示文本，也不聚焦的问题
qq_66037898的博客
02-23 945
前端踩坑
input框里边显示隐藏vaule内容
sinat_35539553的博客
06-22 455
<input type="text" value="手机"> <script> var text=document.querySelector('input'); text.onfocus=function(){ if(this.value=="手机"){ this.value=""; } } text.onb..
vue input 点击文本变输入框，失焦后变回文本，解决点击文本时自动获取焦点
最新发布
qq_47797517的博客
05-31 2092
运行代码发现效果不对如第一张图所示还是没聚焦，开始确认是否是使用v-if导致的，换成v-show，还是不行，最后找百度，结合之前的代码， 终于找到了原因，渲染组件需要时间，但是时间没有JS执行的快；最开始效果是不对的，点击一行单元格，虽然由文本变为输入框了，但是当点击第二行的输入框时，第一行并没有失焦，因为失焦事件加在了input上，当点击时input 并没有聚焦，所以当点击第二个时也没走失焦事件。方法二： 使用setTimeout。方法一：加个指令 v-focus。data中加一个属性。
input默认选中内容，单击时清楚内容，失去焦点时恢复原来内容
Web魔法师
02-28 5372
为input添加鼠标属性，onmouseover="this.select()"当鼠标移入时，会默认选中input中的内容。当在input内单击时，会自动清除里面的内容，当input失去焦点时，又会自动恢复里面的内容：var inputtext= document.getElementById('input' + number); //获取input的id inputtext.value = it
<input v-model='inputval"> 请问怎么获取 input 获得焦点的value, 和 失去焦点的value
03-23
获取 input 获得焦点的 value，可以使用以下代码： ``` document.querySelector('input').addEventListener('focus', function() { console.log(this.value); }); ``` 失去焦点的 value，可以使用以下代码： ``` document.querySelector('input').addEventListener('blur', function() { console.log(this.value); }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值