> 웹 프론트엔드 > HTML 튜토리얼 > IE如何兼容placeholder属性_html/css_WEB-ITnose

IE如何兼容placeholder属性_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:34:34
원래의
1269명이 탐색했습니다.

在前端开发中,经常需要为input设置placeholder属性,但是placeholder是HTML5新属性,在IE10以下不兼容,那么如何完美兼容呢?

网上搜索了一下,其实也挺简单的,可以采用以下方法:

<script type="text/javascript">    if (!('placeholder' in document.createElement('input'))) {        $('input[placeholder],textarea[placeholder]').each(function() {            var that = $(this),                text = that.attr('placeholder');            if (that.val() === "") {                that.val(text).addClass('placeholder');            }            that.focus(function() {                if (that.val() === text) {                    that.val("").removeClass('placeholder');                }            }).blur(function() {                if (that.val() === "") {                    that.val(text).addClass('placeholder');                }            }).closest('form').submit(function() {                if (that.val() === text) {                    that.val('');                }            });        });    }<script>
로그인 후 복사

  这段代码很容易理解,但是用的时候发现对type=password类型不支持,于是继续搜索直到有了JPlaceHolder.js,感觉很不错,用起来也很简单

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    <title>Examples</title>    <meta name="description" content="">    <meta name="keywords" content=""></head><body>    <input type="password" placeholder="密码">    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>    <script src="JPlaceHolder.js"></script></body></html>
로그인 후 복사

  下载地址:JPlaceHolder.js

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿