<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script type="text/javascript" src="http://static.mtimg.net/js/jquery-1.7.2.min.js"></script>

<script type="text/javascript">

$(function(){

/*

    $lineSearchbg.each(function(){

        //搜索框 请输入目的地、主题或关键词

        $(this).find('.placeholder').focus(function(){

            var arrive = $(this).val();

            if(arrive == '请输入目的地、主题或关键词'){

            $(this).val('').css('color','#000');

            }

        });

        $(this).find('#arriveSearchText').blur(function(){

            var arrive = $(this).val();

            if(arrive == ''){

                $(this).val('请输入目的地、主题或关键词').css('color','#b5b5b5');

            }

        });

    });

*/

        //搜索框 请输入目的地、主题或关键词

        $('.placeholder').focus(function(){

            if( $(this).val() == $(this).attr("placeholder") ){

                $(this).val('').css('color','#000');

            }

        });

        $('.placeholder').blur(function(){

            if( $(this).val() == ''){

                $(this).val( $(this).attr("placeholder") ).css('color','#b5b5b5');

            }

        });

});

</script>

<style type="text/css">

input{width:400px;margin:10px;}

</style>

</head>

<body>

<input type="text" class="" placeholder="啊啊啊啊啊啊啊啊">有placeholder，没有class<br>

<input type="text" class="placeholder">没有placeholder，有class<br>

<input type="text" class="placeholder" placeholder="啊啊啊啊啊啊啊">有placeholder，有class<br>

<input type="text" default="有default"><br>

</body>

</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. Rx.NET响应式编程

    响应式编程 Rx.NET 了解下 1. 引言 An API for asynchronous programming with observable streams.ReactiveX is a co ...

  2. （3）socket的基础使用（基于UDP协议）

    服务端代码 import socket server =socket.socket(socket.AF_INET,socket.SOCK_DGRAM) #SOCK_DGRAM就是数据报,UDP就是数据 ...

  3. 思维题（两点逼近）LeetCode11 Container with Most Water

    Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, ai).  ...

  4. 自己一下午练习Js的代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Git冲突和解决冲突

    1.产生冲突原因 产生:多个开发者同时使用或者操作git中的同一个文件,最后在依次提交和push的时候,第一个操作的是可以正常提交的,而之后的开发者想要执行pull(拉)和pull(push)操作的时 ...

  6. js实现表格行的动态加入------Day56

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/marSmile_tbo/article/details/36752655 现代页面通常都是用div+ ...

  7. JUC集合之 LinkedBlockingDeque

    LinkedBlockingDeque介绍 LinkedBlockingDeque是双向链表实现的双向并发阻塞队列.该阻塞队列同时支持FIFO和FILO两种操作方式,即可以从队列的头和尾同时操作(插入 ...

  8. spring 使用 maven profile

    先看看 maven 定义 profile 的写法 <!-- profiles --> <profiles> <profile> <activation> ...

  9. windows python3 安装gittle

    1 从github clone gittle项目, git clone https://github.com/FriendCode/gittle.git 2 进行到下载的项目,执行安装 python ...

  10. JZ2440 裸机驱动 第8章 NAND Flash控制器

    本章目标  了解NAND Flash 芯片的接口 掌握通过NAND Flash控制器访问NAND Flash的方法 8.1 NAND Flash介绍和NAND Flash控制器使用     NAND ...