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 ...
随机推荐
- Javaweb三大组件之过滤器filter
Filter的三个方法 void init(FilterConfig):在Tomcat启动时被调用: void destroy():在Tomcat关闭时被调用: void doFilter(Servl ...
- 【pom.xml 依赖】使用net.sf.json-lib-2.4-jdk15.jar所需要的其他依赖架包 以及其一直在pom.xml报错的问题
特此声明: json-lib-2.4-jdk15.jar仅它本身不够,必须如下的几个依赖架包都有才能使用!!! 首先 将.json-lib-2.4-jdk15.jar以及其相关的依赖架包的正确配置给出 ...
- Loadrunner的自定义监控器
Loadrunner的自定义监控器 可以使用lr_user_data_point()来实现自定义监控,下面是一个小例子: double showsomething(); Action(){ doubl ...
- 使用JdbcTemplate报 Incorrect column count: expected 1, actual 5错误解决
Incorrect column count: expected 1, actual 5 在使用jdbc的querForObject queryForList的时候,出现Incorrect colum ...
- AngularJS学习之HTML DOM
1.AngularJS为HTML DOM元素的属性提供了绑定应用数据的指令: 2.ng-disabled指令:直接绑定应用程序数据到HTML的disable属性: <div ng-app=&qu ...
- 07 JavaWeb
软件开发的两种架构:c/s和b/s * C/S client/server 客户端/服务器 例子:QQ 快播 暴风影音... ...
- PHP历程(封装的增删改查方法)
db.class.php 主要方法 <?php /** * 数据库配置信息 */ define('DB_HOST','127.0.0.1'); //服务器 define('DB_USER', ...
- sparklyr包--实现R与Spark接口
1.sparklyr包简介 Rstudio公司发布的sparklyr包具有以下几个功能: 实现R与Spark的连接: sparklyr包提供了一个完整的dplyr后端,可筛选并聚合Spark数据集,接 ...
- HDU5331 : Simple Problem
因为是二分图,所以最大独立集$=$总点数$-$最大匹配. 因为是树,所以具有贪心性质,设$f_i$表示$i$是否与其孩子匹配,$a_i$表示$i$的孩子里$f$为$0$的个数,则$f_i=[a_i&g ...
- BZOJ4378 : [POI2015]Logistyka
对于每个询问,设不小于$s$的个数为$cnt$,小于$s$的和为$sum$. 那么如果可以进行$s$轮,当且仅当$sum\geq (c-cnt)\times s$. 权值线段树维护,时间复杂度$O(m ...