关于 百度有啊 的一个细节探讨

今天上了一下 有啊 ,随便看了一点源代码,对于此现象 有点微言:






如上所示,点击 输入商品框时,输入商品这几个字会没有,变成



百度的实现为 :

 

<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').οnfοcus=function(){
						if(this.value=='输入商品'){this.value='';this.className='focus';}
					}
					document.getElementById('mall_search_input').οnblur=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的前端 忽视了这个问题,还是没有读过这本书。


我在 

构建标准web 之 功能表单 (09-05-12)

中 大概 按照ejohn 的思路实现了 label 提示法 ,应该比 youa 的做法好一点。我这里(input 已有一个 label )采用了简化的提示标签javascript生成,更好的符合渐进增强理念应该是 提示标签事先现在html中,在其后的javascript中将其绝对定位到input上面。

 

 

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值