HTML5中Placeholder属性有什么用

本文将为大家详细介绍“HTML5中Placeholder属性有什么用”，内容步骤清晰详细，细节处理妥当，而小编每天都会更新不同的知识点，希望这篇“HTML5中Placeholder属性有什么用”能够给你意想不到的收获，请大家跟着小编的思路慢慢深入，具体内容如下，一起去收获新知识吧。

创新互联建站专注于企业成都全网营销推广、网站重做改版、巴林右旗网站定制设计、自适应品牌网站建设、H5高端网站建设、电子商务商城网站建设、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为巴林右旗等各大城市提供网站开发制作服务。

html是什么

html的全称为超文本标记语言，它是一种标记语言，包含了一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体，html文本是由html命令组成的描述性文本，html命令可以说明文字，图形、动画、声音、表格、链接等，主要和css+js配合使用并构建优雅的前端网页。

Placeholder(占位符) 是 HTML5 新增的一个 HTML 属性，用来对可输入字段的期望值提供提示信息，目前已经得到主流浏览器的广泛支持，使用方式非常简单：

该属性适用于 </code> 多行文本框和 <code>type</code> 属性值为 text, password, search, tel, url 或者 email 等的 <code><input></code>。</p><p><img src="/upload/otherpic60/60385e4ee5000.png" alt="HTML5中Placeholder属性有什么用"></p><h4>自定义样式</h4><p>如果想改变 placeholder 的默认呈现样式，应该使用 <code>::placeholder</code> 伪元素选择器，不过当前还没有浏览器支持，因此只能根据不同浏览器的不同实现方式分别定义：</p><pre>::-webkit-input-placeholder { /* Chrome/Safari/Opera */ color: green;}::-moz-placeholder { /* Firefox 19+ */ color: green;}:-ms-input-placeholder { /* IE 10+ 注意这里只有一个冒号 */ color: green;}</pre><p>为什么样式要分别定义呢，如果像下面这样组合到一起：</p><pre>::-webkit-input-placeholder,::-moz-placeholder { color: green;}</pre><p>不应该把针对不同浏览器的选择器写在一起，这样写会因为无法识别的选择器而造成这整个规则集被忽略(当然，像类似 IE 7 这种具有超强错误处理能力的浏览器除外，不过这里和 IE 7 没什么关系)。</p><h4>Firefox 定义方式的改变</h4><p>如果需要兼容老版本的 Firefox 浏览器，还需要添加下面这种只有一个冒号的样式规则：</p><pre>:-moz-placeholder { /* Firefox 4 - 18 */ color: green;}</pre><p>因为从 Firefox 19 开始一个冒号的伪类定义方式 <code>:-moz-placeholder</code> 被废弃了，切换为两个冒号的伪元素定义方式。与此同时，它还添加了一个默认的 <code>opacity: 0.54</code> 不透明度样式，如果需要，可以覆盖掉该样式，否则文字是半透明的：</p><pre>::-moz-placeholder { color: green; opacity: 1;}</pre><h4>伪类和伪元素</h4><p>伪类和伪元素有什么区别呢？伪类可以理解为给某个元素添加了一个类，比如 <code>:first-child</code> 伪类，选择第一个子元素：</p><pre>p:first-child { font-size: 16px;}</pre><p>也可以理解为元素当前的状态，同样也可以通过添加一个真正的 class 来实现类似效果：</p><pre>p.first-child { font-size: 16px;}</pre><p>无论是伪类还是真正的类，样式都是直接添加到 <code><p></code> 元素上的。</p><p>而伪元素可以理解为添加了一个虚拟的元素。比如 <code>p:before</code> 伪元素，可以像下面这个伪代码这样理解：</p><pre><before>p:before</before><p>paragraph</p></pre><p>这里 <code><p></code> 元素和 <code>p:before</code> 可以理解为是两个不同的元素。如果被绕晕了，没关系，毕竟这不是本文的重点，更多伪元素与伪类的信息可以参考 Pseudo-classes - CSS | MDN 和 Pseudo-elements - CSS | MDN</p><h4>关于伪类选择器引发的问题</h4><p>因为 IE 浏览器使用的是伪类 <code>:-ms-input-placeholder</code> 选择器来定义 placeholder 的样式，实际上样式是作用于文本输入框的，如果另外还有针对文本输入框的选择器特殊性更高的样式规则，将会覆盖掉该样式，参考下面代码：</p><pre>input:-ms-input-placeholder { /* 0, 0, 1, 1 */ color: green;}#username { /* 0, 1, 0, 0 */ color: blue;}</pre><p>注释中的数字用来表示该选择器的特殊性。</p><p>上面两个样式规则当中使用 ID 选择器的特殊性更高，所以在 IE 10/11 中测试会看到 placeholder 显示为蓝色，与期望的有点不一样。同样使用伪类选择器的旧版本 Firefox 也会出现这个问题，因此，在书写样式的时候需要特别注意，实在搞不定，别忘了还有 <code>!important</code> 规则可以用。其它使用两个冒号的伪元素选择器的浏览器不会出现这个问题，例如：</p><pre>input::-webkit-input-placeholder { /* 0, 0, 0, 2 */ color: green;}#username { /* 0, 1, 0, 0 */ color: blue;}</pre><p>上面两个样式规则互相之间不会影响，使用 Chrome 测试 placeholder 的颜色为绿色。</p><p>关于选择器的特殊性可以参考拙作CSS选择器特殊性与重要性。</p><h4>让行为保持一致</h4><p>虽然样式是可以自定义了，不过在行为上还有些差异，在 Chrome 和 Firefox 中当文本输入框输入内容时 placeholder 才会消失，清除内容时又会显示出来；而在 IE 中则是当文本输入框获取焦点时 placeholder 就消失了，失去焦点同时没有输入内容时才会重新显示。如果希望在 Chrome 和 Firefox 等浏览器中实现获取焦点就消失的效果，可以借助 <code>:focus</code> 伪类选择器来将 placeholder 的文本颜色设置为透明：</p><pre>:focus::-webkit-input-placeholder { color: transparent;}</pre><p>当文本输入框获取焦点时，placeholder 的颜色被设置为透明，感官上就好像消失一样。</p><h4>JavaScript</h4><p>获取或者修改 placeholder 的内容直接获取或者修改对应文本输入框的 <code>placeholder</code> 属性的值就行了：</p><pre>$('input').attr('placeholder', 'Please enter your name');</pre><p>So easy，妈妈再也不用担心我写代码了。不过，想要像普通 DOM 元素那样通过 javaScript 获取伪元素对象直接操作估计很难，目前可以使用 <code>window.getComputedStyle()</code> 方法来得到其样式属性，该方法的第二个参数是一个伪元素：</p><pre>window.getComputedStyle(document.getElementById('username'), '::-moz-placeholder').getPropertyValue('color'); // "rgb(0, 255, 0)"</pre><p>如果要通过 JavaScript 来修改 placeholder 伪元素的样式的话比较好的一种方式是预先定义好几种不同的样式：</p><pre>.style-1::-moz-placeholder { color: green;}.style-2::-moz-placeholder { color: red;}</pre><p>然后通过切换文本输入框的 <code>class</code> 属性来实现修改样式的目的：</p><pre>$('input').addClass('style-2').removeClass('style-1');</pre><p>另外也可以通过直接添加样式规则来实现。</p><h4>Polyfill</h4><p>对于不支持该属性的浏览器，会简单地忽略掉。原则上，placeholder 仅仅是用来对期望的输入起个提示的作用，对于不支持的浏览器在可用性上不受任何影响。如果需要兼容，那么应该使用特性检测的方式，针对不支持的浏览器使用 Polyfill，对于支持的浏览器来说，原生的当然是最好。</p><p>判断浏览器是否支持 <code><input></code> 元素的 <code>placeholder</code> 属性，可以引入 Modernizr 库来判断：</p><pre>if (!Modernizr.input.placeholder) { // 做点什么事}</pre><p>也可以自己写判断，简单易行的办法就是生成一个 <code><input></code> 元素对象，并判断该元素对象是否具有 <code>placeholder</code> 属性：</p><pre>'placeholder' in document.createElement('input')</pre><p>同理，对于 <code><textarea></code> 元素也是一样：</p><pre>'placeholder' in document.createElement('textarea')</pre><p>另外，Opera Mini 明明不支持 placeholder 属性，却装成自己很懂的样子。这时候可以使用客户端检测技术来将之排除掉，Opera Mini 的 window 对象包含一个 operamini 对象：</p><pre>({}).toString.call(window.operamini) === '[object OperaMini]'</pre><p>结合起来就是这样：</p><pre>if (!('placeholder' in document.createElement('input')) || ({}).toString.call(window.operamini) === '[object OperaMini]') { // 做点什么事}</pre><p>在编写 Polyfill 的时候应该尽量与原生功能保持一致，我这里选择向 IE 的方式看齐，即当文本输入框获取或失去焦点的时候处理 placeholder 是否显示，将文本输入框的 <code>value</code> 值设置为 <code>placeholder</code> 的值来模拟显示 placeholder 的状态。再添加上事件处理程序，当文本输入框获取焦点时如果 <code>value</code> 的值为 placeholder 则清空文本输入框；当文本输入框失去焦点时如果 <code>value</code> 值为空则将 placeholder 的内容赋给它，同时当 placeholder 显示的时候应该给文本输入框添加一个 <code>class="placeholder"</code> 用来设置样式以区别是显示的 placeholder 和还是显示的普通 value：</p><pre>// 做点什么事$('input[placeholder]').on('focus', function() { var $this = $(this); if (this.value === $this.attr('placeholder') && $this.hasClass('placeholder')) { this.value = ''; $this.removeClass('placeholder'); }}).on('blur', function() { var $this = $(this); if (this.value === '') { $this.addClass('placeholder'); this.value = $this.attr('placeholder'); }});</pre><p>这只是一个简单的模拟实现，实际上还有很多需要处理的情况。</p><h5>处理密码输入框</h5><p>如果需要处理 placeholder 的是个密码输入框，它的 <code>value</code> 值会显示为圆点之类的字符，呈现几个莫名其妙的圆点来作为 placeholder 提示恐怕不妥，因此需要特殊对待一下，将密码输入框拷贝一份出来然后修改其 <code>type</code> 属性为 'text' 来替代显示 placeholder，并把原本的密码输入框隐藏：</p><pre>$('input[placeholder]').on('blur', function() { var $this = $(this); var $replacement; if (this.value === '') { // 失去焦点时值为空则显示 placeholder if (this.type === 'password') { $replacement = $this.clone().attr('type', 'text'); $replacement.data('placeholder-password', $this); // 替代显示的文本输入框获取焦点时将它删掉，并且重新显示原来的密码输入框 $replacement.on('focus', function() { $(this).data('placeholder-password').show().focus(); $(this).remove(); }); $this.after($replacement).hide(); $this = $replacement; } $this.addClass('placeholder'); $this[0].value = $this.attr('placeholder'); }});</pre><p>对于 IE 8 来说它不支持修改 input 元素的 type 属性，使用 jQuery 的 .attr() 方法来修改的话只会默默地失败。此时，可以新建一个文本输入框，然后把密码输入框上的属性赋给这个新建的文本输入框：</p><pre>try { $replacement = $this.clone().prop('type', 'text'); // 使用 .prop() 方法在 IE 8 下会报错} catch(e) { $replacement = $('<input>').attr({ 'type': 'text', 'class': this.className // 还可以赋予 id, name 等属性 });}</pre><p>需要注意的是 id 和 name 属性不要重复了，可以先用一个变量保存下来，再用 .removeAttr() 方法来删除属性。</p><h5>处理表单提交</h5><p>当表单提交的时候应该将那些正在显示 placeholder 的文本输入框过滤掉，毕竟没有必要将那些没有用的数据提交给<a title="服务器" target="_blank" href="http://www.cdfuwuqi.com/">服务器</a>，在提交时候将那些文本输入框的 <code>value</code> 值设为空，提交之后再恢复成显示 placeholder 的状态：</p><pre>$(document).on('submit', 'form', function() { var $input = $('.placeholder', this); $input.each(function() { this.value = ''; }); setTimeout(function() { $input.each(function() { this.value = $(this).attr('placeholder'); }); }, 10);});</pre><h5>离开页面时</h5><p>当用户离开页面时也需要清空正在显示 placeholder 的文本输入框，防止浏览器记住文本输入框当前的值，这里可以给 window 对象绑定一个 <code>beforeunload</code> 事件来处理：</p><pre>$(window).on('beforeunload', function() { $('.placeholder').each(function() { this.value = ''; });});</pre><p>另外还需要考虑的问题：</p><ul><li><p>使用代码给一个文本输入框赋值时，应该同时处理 placeholder 的状态。</p></li><li><p>使用代码获取一个正在显示 placeholder 的文本输入框的值的时候应该得到的是一个空字符串。</p></li></ul><p>如此多的问题也就是说无论 Polyfill 写到如何极致，都很难与原生的功能相提并论，因此推荐的方式使用特性检测技术仅针对不支持的浏览器做 Polyfill，而 Polyfill 的功能应尽可能地向原生功能看齐。</p><h4>总结</h4><p>将所有样式总结起来：</p><pre>input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #999;}input::-moz-placeholder, textarea::-moz-placeholder { color: #999; opacity: 1;}input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #999;}.placeholder { color: #999;}input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder { color: transparent;}input:focus::-moz-placeholder, textarea:focus::-moz-placeholder { color: transparent;}</pre><p>Polyfill 可以直接使用这个 jQuery 插件 mathiasbynens/jquery-placeholder，已经相当完善了。</p><p>如果你能读到这里，小编希望你对“HTML5中Placeholder属性有什么用”这一关键问题有了从实践层面最深刻的体会，具体使用情况还需要大家自己动手实践使用过才能领会，如果想阅读更多相关内容的文章，欢迎关注创新互联行业资讯频道！</p> <br> 网站名称：HTML5中Placeholder属性有什么用 <br> 标题来源：<a href="http://cxhlcq.com/article/jsoehd.html">http://cxhlcq.com/article/jsoehd.html</a> </div> </div> </div> <div class="other container"> <h3>其他资讯</h3> <ul> <li> <a href="/article/jiggdc.html">如何在vue中使用vue-resource调用接口获取数据</a> </li><li> <a href="/article/jigggp.html">pythonBinarytoStr编码格式化问题</a> </li><li> <a href="/article/jigggi.html">Android中怎么利用AbsoluteLayout实现绝对布局</a> </li><li> <a href="/article/jiggij.html">服务器的保护工作有哪些</a> </li><li> <a href="/article/jigggo.html">MilluminforMac有什么用</a> </li> </ul> </div> <div class="footer"> <div class="foota container"> <div class="foot_nav fl col-lg-8 col-md-8 col-sm-12 col-xs-12"> <ul> <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>网站制作</h3> <a href="https://www.cdxwcx.com/wangzhan/shop.html" target="_blank">成都商城网站制作</a><a href="http://www.cxhljz.cn/" target="_blank">成都网站制作</a><a href="http://seo.cdkjz.cn/wangzhan/" target="_blank">网站制作公司</a><a href="https://www.cdxwcx.com/" target="_blank">网站制作</a><a href="http://www.cxjianzhan.com/mobile/" target="_blank">手机网站制作</a><a href="http://chengdu.cdcxhl.com/" target="_blank">成都营销网站制作</a> </li> <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>企业服务</h3> <a href="https://www.cdcxhl.com/shoulu/" target="_blank">免费收录</a><a href="https://www.cdcxhl.com/mianfei/zuo/chengdu.html" target="_blank">免费做网站</a><a href="https://www.cdcxhl.com/weihu/chengdu.html" target="_blank">成都网站维护</a><a href="https://www.cdcxhl.com/ruanwen/" target="_blank">软文营销</a><a href="https://www.cdcxhl.com/service/ypfwzgz.html" target="_blank">互联网药品信息服务资格证</a><a href="https://www.cdcxhl.com/mianfei/jianshe/chengdu.html" target="_blank">免费网站建设</a> </li> <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>网站建设</h3> <a href="http://m.cdcxhl.cn/shop/" target="_blank">成都商城网站建设公司</a><a href="http://chengdu.cdcxhl.cn/jianshe/" target="_blank">成都网站建设公司</a><a href="http://www.cdkjz.cn/develop/" target="_blank">电商网站建设</a><a href="http://www.cdkjz.cn/fangan/store/" target="_blank">成都电商网站建设方案</a><a href="https://www.cdxwcx.com/city/nanchong/" target="_blank">南充网站建设</a><a href="https://www.cdxwcx.com/city/ziyang/" target="_blank">资阳网站建设</a> </li> <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>服务器托管</h3> <a href="https://www.cdcxhl.com/idc/yldx.html" target="_blank">义龙电信机房</a><a href="https://www.cdcxhl.com/idc/leshan.html" target="_blank">乐山服务器托管</a><a href="https://www.cdcxhl.com/tuoguan/yidong/" target="_blank">移动服务器托管</a><a href="http://www.cdfuwuqi.com/tuoguan/duoxian/" target="_blank">多线服务器托管</a><a href="https://www.cdcxhl.com/idc/deyang.html" target="_blank">德阳服务器托管</a><a href="http://www.cdfuwuqi.com/jigui/" target="_blank">成都机柜租用</a> </li> </ul> </div> <div class="footar fl col-lg-4 col-md-4 col-sm-12 col-xs-12"> <p>全国免费咨询:</p> <b>400-028-6601</b> <p>业务咨询：028-86922220 / 13518219792</p> <p>节假值班：18980820575 / 13518219792</p> <p>联系地址：成都市太升南路288号锦天国际A幢1002号</p> </div> </div> <div class="footb"> <div class="copy container"> <div class="fl">Copyright © 成都创新互联科技有限公司重庆分公司 <a href="https://beian.miit.gov.cn/" target="_blank">渝ICP备2021005571号</a></div>  </div> </div> <div class="link"> <div class="container"> 友情链接:： <a href="https://www.cdcxhl.com/" target="_blank">成都网站建设</a> <a href="https://www.cdcxhl.com/city/chongqing.html" target="_blank">重庆网站建设</a> <a href="">四川网站建设</a> <a href="">重庆建设网站</a> <a href="https://www.cdxwcx.com/jifang/xiyun.html" target="_blank">移动服务器托管</a> <a href="http://www.cdfuwuqi.com/" target="_blank">成都服务器托管</a> <a href="https://www.cdcxhl.cn/" target="_blank">云服务器</a> <a href="http://www.cdhuace.com/" target="_blank">广告设计制作</a> <a href="https://www.cdcxhl.com/sheji/chongqing.html" target="_blank">重庆网页设计</a> <a href="https://www.cdcxhl.com/zuo/chongqing.html" target="_blank">重庆做网站</a> <a href="https://www.cdcxhl.com/zhizuo/chongqing.html" target="_blank">重庆网站制作</a> <a href="">重庆网站建设</a> <a href="">重庆网站公司</a> <a href="">渝中网站制作</a> <a href="">重庆网站设计</a> </div> </div> </div> <div class="foot"> <ul class="public-celan"> <li> <a href="https://p.qiao.baidu.com/cps3/chatIndex?siteToken=6ce441ff9e2d6bedbdfc2a4138de449e&speedLogId=162260383240185e3_1622603832401_02407&eid=6256368&reqParam=%7B%22from%22%3A1%2C%22sessionid%22%3A%22-100%22%2C%22siteId%22%3A%2211284691%22%2C%22tid%22%3A%22-1%22%2C%22userId%22%3A%226256368%22%2C%22ttype%22%3A1%2C%22pageId%22%3A0%7D" target="_blank" class="a1 db tc"> <img src="/Public/Home/img/icon-23.png" alt="" class="db auto"> <span class="span-txt">在线咨询</span> </a> </li> <li> <a href="tel:18980820575" class="a1 db tc"> <img src="/Public/Home/img/icon-24.png" alt="" class="db auto"> <span class="span-txt">电话咨询</span> </a> </li> <li> <a target="_blank" href="tencent://message/?uin=1683211881&Site=&Menu=yes" class="a1 db tc"> <img src="/Public/Home/img/icon-25.png" alt="" class="db auto"> <span class="span-txt">QQ咨询</span> </a> </li> <li> <a target="_blank" href="tencent://message/?uin=532337155&Site=&Menu=yes" class="a1 db tc public-yuyue-up"> <img src="/Public/Home/img/icon-26.png" alt="" class="db auto"> <span class="span-txt">预约顾问</span> </a> </li> </ul> </div> <div class="customer"> <dl class="icon1"> <dt> <a href="tencent://message/?uin=1683211881&Site=&Menu=yes"> <i class="iconT"><img src="/Public/Home/img/QQ.png" alt=""></i> <p>在线咨询</p> </a> </dt> </dl> <dl class="icon2"> <dt><i><img src="/Public/Home/img/weixin.png" alt=""></i><p>微信咨询</p></dt> <dd><img src="/Public/Home/img/ewm.png"></dd> </dl> <dl class="icon3"> <dt><i><img src="/Public/Home/img/dianhua.png" alt=""></i><p>电话咨询</p></dt> <dd> <p>028-86922220（工作日）</p> <p>18980820575（7×24）</p> </dd> </dl> <dl class="icon4"> <dt class="sShow"> <a href="tencent://message/?uin=244261566&Site=&Menu=yes"> <i><img src="/Public/Home/img/dengji.png" alt=""></i><p>提交需求</p> </a> </dt> </dl> <dl class="icon5"> <dt class="gotop"> <a href="#top"> <i><img src="/Public/Home/img/top.png" alt=""></i><p>返回顶部</p> </a> </dt> </dl> </div> </body> </html> <script> $(".con img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>