这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失。

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文本框设置和移除默认值的更多相关文章

  1. input文本框设置和移除默认值

    input文本框设置和移除默认值 这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: ...

  2. js中input文本框设置和移除默认值

    这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: <input id=&quo ...

  3. 使用placeholder属性设置input文本框的提示信息

    input文本框中设置提示信息,可以使用placeholder属性 <!DOCTYPE html> <html> <head> <meta charset=& ...

  4. ie下使用文本编辑器导致input文本框无法聚焦的问题原因

    最近公司的一个项目遇到一个如下问题: 描述:测试发现,每当我们在发布活动的页面发布完活动后,页面跳转到我的活动,然后再次回到发布活动页面,发现所有的input文本框都不能聚焦.然后再去看看其他页面(我 ...

  5. chrome表单自动填充导致input文本框背景变成偏黄色问题

    你曾遇到过吗? 困扰宝宝好久的问题,本以为是什么插件导致的,结果是chrome浏览器自动填充文本时默认的样式,搜嘎. 一.修改自动填充input文本框背景色: 使用以下代码 可以设置自己的想要的默认文 ...

  6. input文本框的value属性在页面中不随输入的数据而变化

    今天,在做试验遇到这么一个需求: 一个input文本框,输入值后将标签传到后台,在后台解析标签,发现value仍然是初值,不是我们改变后的值. 例如: <input name="&qu ...

  7. 实现表单input文本框不可编辑的三种方法

    感谢原文作者:青灯夜游 原文链接:https://www.php.cn/div-tutorial-413133.html 目录 问题 实现方式 1.οnfοcus=this.blur() 2.read ...

  8. input 文本框和 img 验证码对齐问题

    input 文本框和 img 验证码对齐问题 在网页制作中,常将 input 和 img 放在同一行,img标签总是比input高出一个头,非常难看. CCS实现input和img水平对齐的方法 同时 ...

  9. 我的插件のinput文本框实现宽度自适应

    先来最后结果:DEMO 介绍一下如何让一个文本框的宽度能够随着文本框中的内容的宽度增长而增长,也就是能够实现宽度自适应效果. 代码实例如下: <!DOCTYPE html> <htm ...

随机推荐

  1. hibernate基础的CRUD的操作

    保存记录 session.save(customer); 根据主键进行查询 Customer customer = (Customer)session.get(Customer.class ,1); ...

  2. phpstudy配置ssl

    https://yunpan.cn/cPEyzVycbkiE3 (提取码:03aa) 1.重写规则:http://www.cnphp.info/htaccess-rewrite.html 2.相关文档 ...

  3. 关于main函数传参数的问题

    argc是命令行总的参数个数      argv[]是argc个参数,其中第0个参数是程序的全名,以后的参数      命令行后面跟的用户输入的参数,比如:      int   main(int   ...

  4. flv文件格式解析!!!

    flv头 FLV header 总体上看,FLV包括文件头(File Header)和文件体(File Body)两部分,其中文件体由一系列的Tag组成. Signature: FLV 文件的前3个字 ...

  5. hdu1160 LIS变形

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=1160 题意:两个子序列 一个是升序,一个是降序,求最长的子序列是多长,并输出路径.(答案不 ...

  6. constructor

    function Person(name){ this.name = name; } Person.prototype = { constructor : Person, sayName : func ...

  7. python闭包与装饰器

    转自小马哥: 闭包和装饰器充分体现了Python语法糖的优雅感觉. 在本文中,我们的实验要完成两个工作,一个是加法,一个是累计调用加法的次数,最普通的Python程序可以这么写: def valida ...

  8. 同引擎mysql数据库转导快

    mysql数据库从一个表导入到另外一个表,数据库表引擎类型相同速度会快很多,相反,慢得离奇,5w,相同从myisam到myisam一或两分钟,从myisam到innodb要1到2个小时. [注意:最近 ...

  9. 【转】crontab定时任务中文乱码问题

    转载:http://blog.163.com/rettar@126/blog/static/1216503422012135511740/ 手动执行都很正常的的脚步,添加到定时任务中一直执行失败,日志 ...

  10. [ JS 进阶 ] test, exec, match, replace

    https://segmentfault.com/a/1190000003497780 对了,这篇文章可能会涉及到正则表达式相关知识,所以推荐没有正则基础的去看看这篇入门文章:正则表达式30分钟入门教 ...