仿淘宝搜索框之---ie9以下版本placeholder效果

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>仿淘宝搜索框</title><style>.search{width: 300px;height: 30px;margin: 100px auto;position: relative;}.search input {width: 200px;height: 25px;}.search label{font-size: 12px;color: #CCCCCC;position: absolute;top: 8px;left: 10px;cursor: text;}</style><script type="text/javascript">window.onload = function(){function $(id){return document.getElementById(id);}$('txt').focus();$('txt').oninput = $('txt').onpropertychange = function(){if(this.value == ""){$('message').style.display = 'block';} else {$('message').style.display = 'none';}}}</script></head><body><div class="search"><input type="text" id="txt" /><label for="txt" id="message">puma女鞋</label></div></body>
</html>

打开页面，搜索框中就可以看到灰色字体“puma女鞋”并自动获取光标。点击输入，灰色字消失。清空文本框的所有内容，灰色字自动恢复。

判断用户输入的事件有 oninput 和onpropertychange 。由于浏览器兼容的问题，他们出现的场合有所不同。正常浏览器支持oninput ，而 IE6、IE7、IE8 支持的 onpropertychange 。

仿淘宝搜索框之---ie9以下版本placeholder效果相关推荐

Javascript小案例（一）：仿淘宝搜索框用户输入事件的实现
淘宝是我们经常用的一个网上购物平台,打开淘宝网首页,找到淘宝首页的搜索框,如下如所示: (截图日期:2017年6月18日) 大家可以看到,当页面一打开,搜索框中就可以看到灰色字体"少女高跟鞋 ...
原生JS写仿淘宝搜索框（代码+效果），可实现3级搜索哦！
闲来无事,用原生JS写了一个淘宝搜索框,用的淘宝的接口,可直接进行商品搜索. 写在前面: 1.记得引用jquery啊! 2.有人私信我说css样式不能用,那是因为复制代码的时候,有空格,只需要自己把c ...
对于杯子、淘宝搜索框的测试用例
对于杯子的测试功能水到容量的一半水到规定的刻度线水杯容量刻度与其他水杯一致盖子拧紧水到不出来烫手验证性能使用的最大次数或时间掉到地上不易损坏盖子拧到什么程度水倒不出来保温时间长 ...
软件测试面试题：如何对淘宝搜索框进行测试？
如何对淘宝搜索框进行测试? 一, 功能测试 1. 输入关键字,查看: 返回结果是否准确,返回的文本长度需限制 1.1输入可查到结果的正常关键字.词.语句,检索到的内容.链接正确性: 1.2输入不可查到 ...
Axure仿淘宝搜索原型
做了个模仿淘宝搜索原型,先上图啦看似简单的搜索栏,包括的内容可不少哦,包含了:矩形.文本框.动态面板等. 操作步骤: 一.添加元件 1.新建三个矩形, 宽:51,高:26 , 无填充色.无边框, 分 ...
仿淘宝Android实现底部导航栏图标溢出效果-clipChildren属性
1.clipChildren和clipPadding说明 clipChildren用来定义他的子控件是否要在他应有的边界内进行绘制. 默认情况下,clipChild被设置为true. 也就是不允许进行 ...
仿淘宝搜索历史，搜索词超两行隐藏，出现展开图标
<template>  <div class="search-input"><van-search v-mod ...
ecshop 商品颜色尺寸仿淘宝选择功能教程(2.7.0版本)
牵涉到的修改文件(default模板为例) /themes/default/style.css /themes/default/goods.dwt 注:此路径待修改模板路径. 修改步骤: 一:控制样式 ...
html简单淘宝搜索框怎么做,天猫前端系列教材（八）- 公共页面 - 简单搜索栏...
代码比较复制代码 div.simpleSearchDiv{ background-color: #C40000; width: 300px; margin: 10px 20px 40px; padd ...

仿淘宝搜索框之---ie9以下版本placeholder效果

仿淘宝搜索框之---ie9以下版本placeholder效果相关推荐

最新文章

热门文章