HTML input文本框设置和移除默认值
这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失。
1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码:
<input id="keyword" name="keyword" size="10" class="inputstyle keywords" value="请输入关键字进行搜索"
onfocus='if(this.value=="请输入关键字进行搜索"){this.value="";}; '
onblur='if(this.value==""){this.value="请输入关键字进行搜索";};'>
其实onfocus属性挺好用的,还可以在通过onfocus属性改变css样式,如下代码:
<input id="keyword" name="keyword" size="10" class="inputstyle keywords" value="请输入关键字进行搜索"
onfocus='if(this.value=="请输入关键字进行搜索"){this.value="";}; this.className="input01"'
onblur='if(this.value==""){this.value="请输入关键字进行搜索";}; this.className="input02"'>
2.也可以使用jquery实现:
$(document).ready(function() {
var vdefault = $('#keyword').val();
$('#keyword').focus(function() {
//获得焦点时,如果值为默认值,则设置为空
if ($(this).val() == vdefault) {
$(this).val("");
}
});
$('#keyword').blur(function() {
//失去焦点时,如果值为空,则设置为默认值
if ($(this).val()== "") {
$(this).val(vdefault); ;
}
});
});
HTML input文本框设置和移除默认值的更多相关文章
- input文本框设置和移除默认值
input文本框设置和移除默认值 这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: ...
- js中input文本框设置和移除默认值
这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: <input id=&quo ...
- 使用placeholder属性设置input文本框的提示信息
input文本框中设置提示信息,可以使用placeholder属性 <!DOCTYPE html> <html> <head> <meta charset=& ...
- ie下使用文本编辑器导致input文本框无法聚焦的问题原因
最近公司的一个项目遇到一个如下问题: 描述:测试发现,每当我们在发布活动的页面发布完活动后,页面跳转到我的活动,然后再次回到发布活动页面,发现所有的input文本框都不能聚焦.然后再去看看其他页面(我 ...
- chrome表单自动填充导致input文本框背景变成偏黄色问题
你曾遇到过吗? 困扰宝宝好久的问题,本以为是什么插件导致的,结果是chrome浏览器自动填充文本时默认的样式,搜嘎. 一.修改自动填充input文本框背景色: 使用以下代码 可以设置自己的想要的默认文 ...
- input文本框的value属性在页面中不随输入的数据而变化
今天,在做试验遇到这么一个需求: 一个input文本框,输入值后将标签传到后台,在后台解析标签,发现value仍然是初值,不是我们改变后的值. 例如: <input name="&qu ...
- 实现表单input文本框不可编辑的三种方法
感谢原文作者:青灯夜游 原文链接:https://www.php.cn/div-tutorial-413133.html 目录 问题 实现方式 1.οnfοcus=this.blur() 2.read ...
- input 文本框和 img 验证码对齐问题
input 文本框和 img 验证码对齐问题 在网页制作中,常将 input 和 img 放在同一行,img标签总是比input高出一个头,非常难看. CCS实现input和img水平对齐的方法 同时 ...
- 我的插件のinput文本框实现宽度自适应
先来最后结果:DEMO 介绍一下如何让一个文本框的宽度能够随着文本框中的内容的宽度增长而增长,也就是能够实现宽度自适应效果. 代码实例如下: <!DOCTYPE html> <htm ...
随机推荐
- windows下R语言在终端的运行
在windows下可以有多种方式来运行R,R导论的这些章节给出一些详细的指导. 通常在环境变量离包含R的安装目录类似于R\R-3.1.2\bin\x64的情况下,就可以在CMD下运行R程序了 注意我这 ...
- scrollTo 和 scrollBy
涉及到滑动,就涉及到VIEW,大家都知道,Android的UI界面都是由一个一个的View以及View的派生类组成,View作为基类,而常用的布局里面的各种布局就是它派生出来的ViewGroup的 ...
- util包下的Date与sql包下的Date之间的转换
Java中的时间类型 java.sql包下给出三个与数据库相关的日期时间类型,分别是: Date:表示日期,只有年月日,没有时分秒.会丢失时间: Time:表示时间,只有时分秒,没有年月日.会丢失日期 ...
- 【maven】 pom.xml内容没有错,但一直报错红叉 解决办法
1.首先看一下下面的这两个项目,一个是新建的,一个是原来的老项目 2.myEcplise中是点击如下图 Maven4MyEcplise, Ecplise中也是右键,只不过点击Mavene而已,两个一样 ...
- Tomcat环境配置部署测试环境及架构
Tomcat环境配置已经在前面介绍过了,这边就为童鞋们介绍下对于Tomcat的架构是怎么样的! Tomcat的架构包含(bin.conf.lib.logs.temp.wenapps.work)等文件夹 ...
- Activity之间传递数据的方式及常见问题总结
Activity之间传递数据一般通过以下几种方式实现: 1. 通过intent传递数据 2. 通过Application 3. 使用单例 4. 静态成员变量.(可以考虑 WeakReferences) ...
- 到程序集里取DLL
C:\Windows\assembly\gac_msil
- 记一次小团队Git实践(下)
在上篇中,我们已经能基本使用git了,接下来继续更深入的挖掘一下git. 更多的配置自定义信息 除了前面讲的用户名和邮箱的配置,还可以自定义其他配置: # 自定义你喜欢的编辑器,可选 git conf ...
- WPF ,listbox,平滑滚动的2种方式。
一,烤地瓜版本的.. 这个版本不安装内容滚动,,鼠标滑轮滚动一次距离相同, 具体步骤参照他的博客,说点注意的,, 1,ScrollViewer.CanContentScroll="Fals ...
- sql中保留到小数点后两位以及非空判断赋值为零
SELECT a.dzzmc, a.dzzdm, a.px, CONVERT(decimal(18, 2), ISNULL(b.sjpfzdf, 0) * 0.6 + (ISNULL(a.zddfzd ...