手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表2016年05月4日的文章

select 的 placeholder

select的placeholder其实是无效的。所以很多人想了一些奇技淫巧,比如利用HTML的标签:

XML/HTML代码
  1. <select>  
  2.     <option value="" disabled selected hidden>Please Choose</option>  
  3.     <option value="0">Open when powered (most valves do this)</option>  
  4.     <option value="1">Closed when powered, auto-opens when power is cut</option>  
  5. </select>  
这样就可以看得到,但点击下拉框的时候,就不在选项里了,可以到这里看效果:http://cssdeck.com/labs/hxovifav,
但其实这不应该出现在前端面前,prompt不就是针对select的吗?
 
select的placeholder的属性确实无效,它应该使用prompt!!!
象上面的代码就应该写成:
XML/HTML代码
  1. <select prompt="Plaese Choose">  
  2.     <option value="0"> 0 </option>  
  3.     <option value="1" 1 </option>  
  4. </select>  
很多资料里都应该有吧?
 
上面关于prompt的资料都错了。对不住各位,主要是在用Yii框架的时候,直接加入"prompt"属性就可以有这个效果,导致我这个对HTML不熟悉的人误解 了,经过@Deeka的指正,我发现,这是Yii自己的实现。比如:
 
PHP代码
  1. if (isset($tagOptions['prompt'])) {  
  2.     $prompt = $encode ? static::encode($tagOptions['prompt']) : $tagOptions['prompt'];  
  3.     if ($encodeSpaces) {  
  4.         $prompt = str_replace(' '' '$prompt);  
  5.     }  
  6.     $lines[] = static::tag('option'$prompt, ['value' => '']);  
  7. }  
他自己实现了这么一条空信息,我没细看,对不住各位