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

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. DrawerLayout

        一.概述       DrawerLayout是官方提供的侧滑菜单,相比SliddingMenu,它更加轻量级.默认情况下,DrawerLayout可以设置左侧或者右侧滑出菜单.如下,   x ...

  2. sql 数字转人民币大写函数(两种方法)

    ,)) returns @rmb table( 亿 ) ,仟万 ) ,佰万 ) ,拾万 ) ,万 ) ,仟 ) ,佰 ) ,拾 ) ,元 ) ,角 ) ,分 )) as begin insert in ...

  3. LoadRunner 脚本学习 -- 读取文件内容

    随便创建个txt文档  输入点内容,例如 读取文件内前N个字符: Action() { long myfile; ; ]; char *filename = "E:\\kkk.txt&quo ...

  4. Android 图表绘制 achartengine 示例解析

    一. AChartEngine 简介 1. 项目地址 AChartEngine 简介 : AChartEngine 是 Android 平台的图表开发库, 能绘制 折线图, 饼图, 气泡图, 柱状图, ...

  5. CSS3_loading效果

    写个div给他个基本样式: <body> <div class="load-container load" id="loader" > ...

  6. Android拓展系列(9)--Android视频录制screenrecord命令

    在Android4.4 Kitkat上集成了一个比较好用的视频录制功能.参考:http://forums.androidcentral.com/android-4-4-kitkat/329674-ho ...

  7. SPOJ PHRASES 后缀数组

    题目链接:http://www.spoj.com/problems/PHRASES/en/ 题意:给定n个字符串,求一个最长的子串至少在每个串中的不重叠出现次数都不小于2.输出满足条件的最长子串长度 ...

  8. css随记01编辑技巧,背景与边框

    代码优化 一个按钮的例子,使其值同比例变化; button{ color: white; background: #58a linear-gradient(#77a0bb, #58a); paddin ...

  9. redis 的使用 (sort set排序集合类型操作)

    sort set排序集合类型 释义: sort set 是 string 类型的集合 sort set 的每个元素 都会关联一个 权 通过 权值 可以有序的获取集合中的元素 应用场合: 获取热门帖子( ...

  10. java 常见下载合集

    J2SE SDK (JDK): Windows: http://download.oracle.com/auth/otn-pub/java/jdk/6u25-b06/jdk-6u25-windows- ...