1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <script type="text/javascript" src="http://static.mtimg.net/js/jquery-1.7.2.min.js"></script>
  7. <script type="text/javascript">
  8. $(function(){
  9.  
  10. /*
  11.     $lineSearchbg.each(function(){
  12.  
  13.         //搜索框 请输入目的地、主题或关键词
  14.         $(this).find('.placeholder').focus(function(){
  15.             var arrive = $(this).val();
  16.             if(arrive == '请输入目的地、主题或关键词'){
  17.             $(this).val('').css('color','#000');
  18.             }
  19.         });
  20.  
  21.         $(this).find('#arriveSearchText').blur(function(){
  22.             var arrive = $(this).val();
  23.             if(arrive == ''){
  24.                 $(this).val('请输入目的地、主题或关键词').css('color','#b5b5b5');
  25.             }
  26.         });
  27.  
  28.     });
  29. */
  30.  
  31.         //搜索框 请输入目的地、主题或关键词
  32.         $('.placeholder').focus(function(){
  33.             if( $(this).val() == $(this).attr("placeholder") ){
  34.                 $(this).val('').css('color','#000');
  35.             }
  36.         });
  37.  
  38.         $('.placeholder').blur(function(){
  39.             if( $(this).val() == ''){
  40.                 $(this).val( $(this).attr("placeholder") ).css('color','#b5b5b5');
  41.             }
  42.         });
  43.  
  44. });
  45. </script>
  46. <style type="text/css">
  47. input{width:400px;margin:10px;}
  48.  
  49. </style>
  50.  
  51. </head>
  52. <body>
  53.  
  54. <input type="text" class="" placeholder="啊啊啊啊啊啊啊啊">有placeholder，没有class<br>
  55. <input type="text" class="placeholder">没有placeholder，有class<br>
  56. <input type="text" class="placeholder" placeholder="啊啊啊啊啊啊啊">有placeholder，有class<br>
  57. <input type="text" default="有default"><br>
  58.  
  59. </body>
  60. </html>

placeholder测试的更多相关文章

  1. 怎么修改placeholder字体的css样式

    修改palceholder内文字的css样式 ::-webkit-input-placeholder{ color: red; font-size: 20px; line-height: 50px; ...

  2. 修改 input中的placeholder的字体样式和颜色

    placeholder属性是css3中新增加的属性, 由于是新加入的属性因此对各大浏览器都不兼容: 因此在使用的时候要加兼容性 火狐:-moz-placeholder { /* Mozilla Fir ...

  3. 【HTML】placeholder中换行

    表示回车 表示换行 案例 <textarea rows="10" placeholder="测试换行 新的一行"></textarea>

  4. HTML5 placeholder实际应用经验分享及拓展

    QQ邮箱登陆(http://mail.qq.com) 如下截图啦: 我在上面一个demo类似原理上做了下修改,制作了一个这样子交互效果的demo,希望对有兴趣的同行能帮上点忙,您可以狠狠地点击这里:透 ...

  5. ng1.3+表单验证<AngularJs>

    前一篇文章说过,ng1.3+以后对于表单验证有了优化,它不再需要一个详细的表达式状态创建元素显示或隐藏. 例如:我们在ng1.3之前的版本都需要如下写法: <div class="er ...

  6. 让 select 的 option 标签支持事件监听（如复制操作）

    这标题,让option支持事件监听,应该不难的呀,有什么好讲的? 其实还是有的,默认在浏览器代码是无法直接对option标签进行操作的,不仅包括JS事件监听,还是CSS样式设置 查了一些资料,姑且认为 ...

  7. 了解HTML表单之13个表单控件

    目录 传统控件 button select option optgroup textarea fieldset legend label 新增控件 datalist keygen output pro ...

  8. React 点击按钮显示div与隐藏div，并给div传children

    最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {re ...

  9. css之属性及剩余的选择符

    今天的课程加速了,比平时快了些,但觉得很不错.nice~ 属性选择符 E[att]       选择具有att属性的E元素. input[type]{color: #red;} <input t ...

随机推荐

  1. Koa下http代理

    前言 最近做管理后台的重构或者说重做. 至于为什么要重构. 随意的解释: 是原来写的人走了. 客观的解释: 用的人觉得不好用 维护的人员找不到北 再多一点解释: express + ejs的混合编写 ...

  2. About DOM

    文档对象模型,简称DOM.是HTML页面结构给javascript提供的一个入口,它就像一个桥梁,连接两者的关系.通过DOM,JavaScript拥有访问并修改HTML的权限. 一.DOM模型: 首先 ...

  3. Let the Balloon Rise map一个数组

    Contest time again! How excited it is to see balloons floating around. But to tell you a secret, the ...

  4. 《DSP using MATLAB》Problem 4.13

    代码: %% ---------------------------------------------------------------------------- %% Output Info a ...

  5. .hex文件和.bin文件的区别

    博客转之于:  http://mini.eastday.com/a/160627003502858.html HEX文件和BIN文件是我们经常碰到的2种文件格式.下面简单介绍一下这2种文件格式的区别: ...

  6. Linux驱动中常用的宏

    .module_i2c_driver(adxl34x_driver)展开为 static int __int adxl34x_driver_init(void) { return i2c_regist ...

  7. asp.net && javascript MD5加密

    /* * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message * Digest Algorithm, as d ...

  8. kettle的输入输出组件和脚本组件

    一. 输入组件 1.1表输入 从指定的数据库中,通过sql语句来查询数据加载到内存. 允许简易转换:勾选后可以避免不必要的字段的数据类型转换,从而提高性能. 替换sql语句里的变量:勾选后可以通过${ ...

  9. 【转】每天一个linux命令（16）：which命令

    原文网址:http://www.cnblogs.com/peida/archive/2012/11/08/2759805.html 我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面 ...

  10. 总结：基于Oracle Logminer数据同步

    第 1 页 共 20 页 出自石山园主,博客地址:http://www.cnblogs.com/shishanyuan LogMiner 配置使用手册 1 Logminer 简介 1.1 LogMin ...