今天上了一下 有啊 ,随便看了一点源代码,对于此现象 有点微言:
如上所示,点击 输入商品框时,输入商品这几个字会没有,变成
百度的实现为 :
<input type="search" results="8" autosave="baidu" accesskey="s" placeholder="输入商品"
name="keyword" size="24" class="" id="mall_search_input"/>
//(function(){
if(window.navigator.userAgent.indexOf("WebKit")== -1){
document.getElementById('mall_search_input').className="";
document.getElementById('mall_search_input').value="输入商品";
document.getElementById('mall_search_input').onfocus=function(){
if(this.value=='输入商品'){this.value='';this.className='focus';}
}
document.getElementById('mall_search_input').onblur=function(){
if(this.value==''){this.value='输入商品';this.className='';}
}
}
//})()
function globalSearch(){
if(document.getElementById('mall_search_input').value==""||
document.getElementById('mall_search_input').value=="输入商品"){
document.getElementById('mall_search_input').focus()
return false;
}
}
这种做法实在有待商讨:
1.全局变量问题自不必说
2.语义化问题:输入商品 这个词 到底是什么 ? 它真的是 mall_search_inputa 这个输入框的值
么?? 毫无疑问 youa认为是,它在点击提交时也进行了过滤。
3.输入商品 这个词 有必要重复这么多出现么?
4.随意在标签添加属性,那么还有申明 html4 strict 模式的必要么
输入商品 从youa的功能以及表现来看,应该是属于提示的范畴
,它和mall_search_inputa 这个输入框的值没有丝毫关系,那么我们设想一下 对于 一个盲人来说 ,这个提示还存在么? 那么 youa这个购物网站 可访问性必要受损
。
正确的做法 应该是 John Resig 在 Pro javascript technique 中提到的 label 定位提示法
,不知道是 youa的前端 忽视了这个问题,还是没有读过这本书。
我在
中 大概 按照ejohn 的思路实现了 label 提示法 ,应该比 youa 的做法好一点。
(我这里(input 已有一个 label )采用了简化的提示标签javascript生成,更好的符合渐进增强理念应该是 提示标签事先现在html中,在其后的javascript中将其绝对定位到input上面。
)
- 大小: 7.1 KB
- 大小: 6.5 KB
分享到:
相关推荐
QWrap是百度有啊前端团队推出的一个javascript框架
仿百度有啊产品列表样式的点击切换特效! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
百度有啊通栏图文混排展示
提取自百度有啊的css圆角效果
百度有啊专家免登陆版 源于http://yooyle.com.cn 破解版仅供学习,请支持正版
(百度有啊老大)产品设计的方法与理念,从中感受百度做产品的设计理念
超赞的百度有啊图文展示效果
百度有啊李明远网购用户的行为分析.pdf
代码简结,重复利用高很不错的css圆角[百度有啊]
百度有啊获数千万美金投资 正式分拆独立运营.docx
dede5.5+大型淘客购物模板-高仿百度有啊购物模板风格
网页模板设计效果图(DIV+CSS 百度有啊JS兼容超强选项卡滑动门封装类库) 该站所有静态源码: www.cityssl.com
比较有个性的焦点图切换代码,支持图片文字排列方式
百度有啊通栏展示大家并不陌生吧,下面与大家分享下具体的实现js代码,感兴趣的朋友可以参考下哈
支持图片“大图”、“列表”两种模式排列
百度有啊的 CSS 圆角写法,原理和《一张图片实现圆角》差不多,也是用背景定位实现的。
百度有啊;张震;科友; <URL>=http://baike.baidu.com/view/1.htm <ID>=2 <TITLE>=词条 <CATEGORY>=百度,百度百科 <RETITLE>=相关词条; <URL>=http://baike.baidu.com/view/2.htm <ID>=3 <TITLE>=编辑...
代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <... charset=gb2312″ /> <...百度有啊css圆角方案</title> <style> .box1{background
非常好用哦,稍加修加就可以用了。市场上找人做要3000多块钱。参考自由刷互刷平台!