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

最新推荐文章于 2021-06-03 11:28:47 发布
原创 最新推荐文章于 2021-06-03 11:28:47 发布 · 7.1k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种解决HTML输入框中预设值与提示文本冲突的方法，通过使用onfocus和onblur事件来动态切换输入框的内容显示。
部署运行你感兴趣的模型镜像

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

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

您可能感兴趣的与本文相关的镜像

ACE-Step

ACE-Step

音乐合成
ACE-Step

ACE-Step是由中国团队阶跃星辰（StepFun）与ACE Studio联手打造的开源音乐生成模型。 它拥有3.5B参数量，支持快速高质量生成、强可控性和易于拓展的特点。 最厉害的是，它可以生成多种语言的歌曲，包括但不限于中文、英文、日文等19种语言

改变隐藏的input中value值的方法
12-09
代码如下: $(“#picTxt”).attr(“value”,picTxt);
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
10-27
本文将讨论如何使用jQuery来实现一个常见的功能：当`input`输入框获得焦点时隐藏默认文字，失去焦点且未输入内容时恢复默认文字。 首先，传统的实现方式是在HTML标签中直接内联JavaScript事件处理函数，例如`...
设置文本框失去焦点与获得焦点的样式
turbo12138
01-25 946
有时需要给文框设置文本框失去焦点与获得焦点的样式，正如密码框一样，没有获得焦点时，内部显示“请输入密码”，当点击密码框时，字样消失，其实并不难，请看代码   &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;/head&gt; &lt;body&gt;
html 隐藏input value值,HTML Input Hidden value用法及代码示例
weixin_33826994的博客
06-03 3086
HTML DOM中的“输入隐藏的值”属性用于设置或返回隐藏的输入字段的value属性的值。 value属性定义输入隐藏字段的默认值。用法:它返回value属性。hiddenObject.value用于设置value属性。hiddenObject.value = text属性值：此属性包含单个值文本，该文本用于指定输入隐藏值的初始值。返回值：它返回一个字符串值，该值表示隐藏输入字段的value属性的...
input框里边显示隐藏vaule内容
sinat_35539553的博客
06-22 540
<input type="text" value="手机"> <script> var text=document.querySelector('input'); text.onfocus=function(){ if(this.value=="手机"){ this.value=""; } } text.onb..
input值不可变、隐藏input(表单隐藏域)
CV_Di的博客
01-25 5161
input标签值不可变、隐藏标签一、值不可变方法1:readonly方法2:disabledreadonly 和 disabled的区别：二、隐藏\标签(表单隐藏域) 一、值不可变 在写前端页面时，有时候我们需要让<input>标签只能看，但不能更改，就行银行卡号之类的。 那么这个时候就需要让标签的值不可变了，让标签值不可变的方法有两种(readonly，disabled)。 方法1:readonly <form action="#"> <h4>方式一:reado
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
10-23
以上步骤实现了密码框在获取焦点时隐藏提示文字，在失去焦点时重新显示提示文字的功能。这种方法提高了表单的易用性，并且对于新用户来说，可以很直观地知道如何操作。 另外，如果开发者希望提高代码的安全性，防止...
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
10-21
本文介绍了一个使用jQuery实现的简单实例，即在网页中通过注册文本框获取焦点时清空提示，失去焦点时如果没有输入，则重新显示提示信息的功能。在用户注册过程中，这常常被用来提示用户输入必须的信息，如账号、密码...
<input v-model='inputval"> 请问怎么获取 input 获得焦点的value, 和 失去焦点的value
03-23
获取 input 获得焦点的 value，可以使用以下代码： ``` document.querySelector('input').addEventListener('focus', function() { console.log(this.value); }); ``` 失去焦点的 value，可以使用以下代码： ```...
input hidden(隐藏域)传值例子
07-29
NULL 博文链接：https://tianjun309.iteye.com/blog/819214
javascript鼠标点入input内value值隐藏事件
carrie_tc的专栏
03-15 1020
鼠标事件                                         //jQuery方法         $(document).ready(function(){         oElement = $("#myinput");         //聚焦时间、鼠标点击的时候触发聚焦时间         oElement.focus(functio
input 输入框获得/失去焦点时隐藏/显示文字
多一点点的专栏
08-21 2912
//获取焦点，取消焦点 $('.txt').bind({ focus:function(){ if (this.value == this.defaultValue){ this.value=""; } }, blur:function(){ if (this.value == ""){ this.value = this.defaultValue
input点击后placeholder中的提示消息消失离开时显示
weixin_44729896的博客
11-26 620
两个事件： 1.onfocus //聚焦 2.onblur //鼠标离开 for(var i = 0;i < $("input").length;i++){ var k = $("input").eq(i); var content; k.focus(function(){ content = $(this).attr("placeholder"); $(...
输入框获取焦点后placeholder文字消失、修改placeholder的样式
angran79676765的专栏
04-28 645
输入框获取焦点后placeholder文字消失： <input placeholder='' onfocus="this.placeholder=''" onblur="this.placeholder='请输入验证码'" > 修改placeholder的样式： /*修改placeholder样式*/ input::-webkit-...
input提示字在有焦点消失或输入改变时消失
weixin_30856725的博客
07-25 367
一：获取焦点时 提示字消失 <input type="text" name="textfield" value="这里是提示内容" onclick="if(value==defaultValue){value='';this.style.color='#000'}" onBlur="if(!value){value=defaultValue;this.style.color='#999...
layui eleTree改造，支持格式化节点
闪耀星星的窝
09-04 1721
eleTree原地址：https://fly.layui.com/extend/eleTree/ css不变，eleTree.js修改如下： /** * @Name: 基于layui的tree重写 * @Author: 李祥 * @License：MIT * 最近修改时间: 2019/10/24 */ layui.define(["jquery","laytpl"], function (exports) { var $ = layui.jquery; var laytpl
input搜索框获取焦点时，placeholder消失
菌哥记录
09-18 9651
/* 点击搜索框获取焦点 placeholder消失-开始 */ /* WebKit browsers */ input:focus::-webkit-input-placeholder { color: transparent; /* transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值 */ } /* Mozilla F
placeholder 效果的实现，input提示字，获取焦点时消失
weixin_30735391的博客
09-22 504
<!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 blur失去焦点获取值
最新发布
09-05
在前端开发中，当输入元素（如`<input>`、`<textarea>`等）的`blur`事件触发时，通常意味着用户的焦点已经从该元素上移开...注意，如果在获取值之前`inputElement.value`已经被改变，那么返回的是失去焦点那一刻的值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值