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

1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码:

  1. <input id="keyword" name="keyword" size="10" class="inputstyle keywords" value="请输入关键字进行搜索"
  2. onfocus='if(this.value=="请输入关键字进行搜索"){this.value="";}; '
  3. onblur='if(this.value==""){this.value="请输入关键字进行搜索";};'>

其实onfocus属性挺好用的,还可以在通过onfocus属性改变css样式,如下代码:

  1. <input id="keyword" name="keyword" size="10" class="inputstyle keywords" value="请输入关键字进行搜索"
  2. onfocus='if(this.value=="请输入关键字进行搜索"){this.value="";}; this.className="input01"'
  3. onblur='if(this.value==""){this.value="请输入关键字进行搜索";}; this.className="input02"'>

2.也可以使用jquery实现:

    1. $(document).ready(function() {
    2. var vdefault = $('#keyword').val();
    3. $('#keyword').focus(function() {
    4. //获得焦点时,如果值为默认值,则设置为空
    5. if ($(this).val() == vdefault) {
    6. $(this).val("");
    7. }
    8. });
    9. $('#keyword').blur(function() {
    10. //失去焦点时,如果值为空,则设置为默认值
    11. if ($(this).val()== "") {
    12. $(this).val(vdefault); ;
    13. }
    14. });
    15. });

js中input文本框设置和移除默认值的更多相关文章

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

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

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

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

  3. html中input文本框,初始里边有文字提示,当点击时,文字消失,怎么设置?

    使用onfocus事件检查当前值,如果是默认值,就将value属性置空.如:<input type="text" value="请输入内容" onfocu ...

  4. JS控制input 文本框只允许输入汉字

    onblur="value=value.replace(/[^/u4E00-/u9FA5]/g,'')" onbeforepaste="clipboardData.set ...

  5. js中——限制文本框输入非数字

      //先把非数字的都替换掉,除了数字和.和/             obj.value = obj.value.replace(/[^\-\d./]/g, ""); //必须保 ...

  6. (三)在js(jquery)中获得文本框焦点和失去焦点的方法

    在js(jquery)中获得文本框焦点和失去焦点的方法   文章介绍两个方法和种是利用javascript onFocus onBlur来判断焦点和失去焦点,加一种是利用jquery $(" ...

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

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

  8. js生成随机编码并赋值给input文本框

    效果图如下: 页面代码: <div class="form-item form-width-in fr"> <label>产 品 编 码</label ...

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

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

随机推荐

  1. models.doc2vec – Deep learning with paragraph2vec

    参考: 用 Doc2Vec 得到文档/段落/句子的向量表达 https://radimrehurek.com/gensim/models/doc2vec.html Gensim Doc2vec Tut ...

  2. [LeetCode&Python] Problem 122. Best Time to Buy and Sell Stock II

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  3. 改变html中的内容

    $("#id").html()            获取内容 $("#id").html(xiugai)    修改内容

  4. Javascript 标准参考教程

    http://javascript.ruanyifeng.com/grammar/array.html

  5. GinKgoCTF-Crypto

    一:古典密码 一只小羊跳过了栅栏,密码如下: GpKlCeT_FC{rAy_pStiym} 栅栏解密——>11栏 二:滴滴滴 --./-.-/-.-./-/..-./----.--/-../.. ...

  6. 最小生成树&&最大生成树模板

    #include<bits/stdc++.h> using namespace std; int n,m; struct edge { int x; int y; int len; }ed ...

  7. ELFhash

    字符串哈希算法(以ELFHash详解)   更多字符串哈希算法请参考:http://blog.csdn.net/AlburtHoffman/article/details/19641123 先来了解一 ...

  8. SVN :Unable to connect to a repository at URL

     编程之路刚刚开始,错误难免,希望大家能够指出. 单位换地方了,SVN的服务器和本机不在一个网段,原先的SVN文件夹进行“SVN Update”的时候报错了,如下: 网上一查,原来是DNS域名解析错误 ...

  9. navicat连接oracle方法及其安装包

    Navicat破解版下载(安装好之后,点击执行最后一个破解文件即可) 链接: https://pan.baidu.com/s/1pMpVwfT 密码: vrt6 连接oracle还需要下载以下文件,o ...

  10. MySQL Profiling--常用命令

    ##=====================================## ## 查看PROFILING是否开启 SELECT @@profiling ## 开始会话级别PROFILING # ...