在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
placeholder 属性是 HTML5 中的新属性,俗名叫“占位符”,功能类似于输入框在得到焦点时,时面的默认值会变成空白,当失去焦点时又会显示默认的文本,我想大家一定使用 js/jquery制作过这样的效果。目前只有在Mozilla Firefox 3.7+、Apple Safari 4+、Google Chrome 4+、Opera11+等现代浏览器支持。” 复制代码 代码如下:<input type="text" name="userName" placeholder="请输入用户名"> placeholder操作起来非常方便,提高了开发效率,同时在高版本浏览器中用户体验也很好,所以本人很喜欢用这个属性。 复制代码 代码如下:function placeholderSupport() { return 'placeholder' in document.createElement('input'); } 上关键代码: 复制代码 代码如下:/* *placeholder兼容ie9以下 author:高丰鸣 add 2016-1-27 */ $(function(){ if(!placeholderSupport()){ // 判断浏览器是否支持 placeholder $(document).ready(function(){ //默认遍历循环添加placeholder $('[placeholder]').each(function(){ $(this).parent().append("<span class='placeholder'>"+$(this).attr('placeholder')+"</span>"); }) $('[placeholder]').blur(function(){ if($(this).val()!=""){ //如果当前值不为空,隐藏placeholder $(this).parent().find('span.placeholder').hide(); } else{ $(this).parent().find('span.placeholder').show(); } }) }); } }); 以上内容给大家介绍了关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法 的相关内容,希望对大家有所帮助。 |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论