지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > jQuery 캡슐화 자리 표시자의 예제 코드

jQuery 캡슐화 자리 표시자의 예제 코드

零下一度
풀어 주다： 2017-07-21 17:27:57
원래의
1478명이 탐색했습니다.

페이지 입력 상자의 기본 프롬프트 텍스트는 일반적으로 placeholder 속성을 ​​사용합니다. 즉: placeholder属性就可以了，即：

<input type="text" name="username" placeholder="请输入用户名" value="" id="username"/>
로그인 후 복사

最多加点样式控制下默认文字的颜色

input::-webkit-input-placeholder{color:#AAAAAA;}
로그인 후 복사

但是在低版本的浏览器却不支持这个placeholder属性，那么真的要在低版本浏览器也要实现跟placeholder一样的效果，就需要写个插件来兼容下，下面就细讲一下怎样用jquery来实现这个模拟效果。

实现这个模拟效果，页面的一般调用方式：

$('input').placeholder();
로그인 후 복사

首先，先写jquery插件的一般结构：

;(function($){
    $.fn.placeholder = function(){//实现placeholder的代码    }
})(jQuery)
로그인 후 복사

下面我们就要判断浏览器是否支持placeholder属性。

;(function($){
    $.fn.placeholder = function(){this.each(function(){var _this = this;var supportPlaceholder = 'placeholder' in document.createElement('input');if(!supportPlaceholder){//不支持placeholder属性的操作}
        });
    }
})(jQuery)
로그인 후 복사

我们要支持链式操作，如下：

;(function($){
    $.fn.placeholder = function(){         return this.each(function(){var _this = this;var supportPlaceholder = 'placeholder' in document.createElement('input');if(!supportPlaceholder){//不支持placeholder属性的操作}
        });
    }
})(jQuery)
로그인 후 복사

默认配置项：

options = $.extend({
    placeholderColor:'#aaaaaa',
    isSpan:false, //是否使用插入span标签模拟placeholder的方式，默认是不需要onInput:true //实时监听输入框},options);
로그인 후 복사

如果不需要通过span来模拟placeholder效果，那么就需要通过输入框的value值来判断，如下代码：

if(!options.isSpan){
    $(_this).focus(function () {var pattern = new RegExp("^" + defaultValue + "$|^$");
        pattern.test($(_this).val()) && $(_this).val('').css('color', defaultColor);
    }).blur(function () {if($(_this).val() == defaultValue) {
            $(_this).css('color', defaultColor);
        }else if($(_this).val().length == 0) {
            $(_this).val(defaultValue).css('color', options.placeholderColor)
        }
    }).trigger('blur');
}
로그인 후 복사

如果需要同span标签来模拟placeholder

var $simulationSpan = $('<span class="wrap-placeholder">'+defaultValue+'</span>');
$simulationSpan.css({'position':'absolute','display':'inline-block','overflow':'hidden','width':$(_this).outerWidth(),'height':$(_this).outerHeight(),'color':options.placeholderColor,'margin-left':$(_this).css('margin-left'),'margin-top':$(_this).css('margin-top'),'padding-left':parseInt($(_this).css('padding-left')) + 2 + 'px','padding-top':_this.nodeName.toLowerCase() == 'textarea' ? parseInt($(_this).css('padding-top')) + 2 : 0,'line-height':_this.nodeName.toLowerCase() == 'textarea' ? $(_this).css('line-weight') : $(_this).outerHeight() + 'px','font-size':$(_this).css('font-size'),'font-family':$(_this).css('font-family'),'font-weight':$(_this).css('font-weight')
});//通过before把当前$simulationSpan添加到$(_this)前面，并让$(_this)聚焦$(_this).before($simulationSpan.click(function () {
    $(_this).trigger('focus');
}));//当前输入框聚焦文本内容不为空时，模拟span隐藏$(_this).val().length != 0 && $simulationSpan.hide();if (options.onInput) {//绑定oninput/onpropertychange事件var inputChangeEvent = typeof(_this.oninput) == 'object' ? 'input' : 'propertychange';
    $(_this).bind(inputChangeEvent, function () {
        $simulationSpan[0].style.display = $(_this).val().length != 0 ? 'none' : 'inline-block';
    });
}else {
    $(_this).focus(function () {
        $simulationSpan.hide();
    }).blur(function () {/^$/.test($(_this).val()) && $simulationSpan.show();
    });
};
로그인 후 복사
기껏해야 기본 텍스트 색상에 일부 스타일 컨트롤을 추가하세요 

;(function($){
    $.fn.placeholder = function(options){
        options = $.extend({
            placeholderColor:'#aaaaaa',
            isSpan:false, //是否使用插入span标签模拟placeholder的方式，默认是不需要onInput:true //实时监听输入框        },options);         return this.each(function(){var _this = this;var supportPlaceholder = 'placeholder' in document.createElement('input');if(!supportPlaceholder){//不支持placeholder属性的操作var defaultValue = $(_this).attr('placeholder');var defaultColor = $(_this).css('color');if(!options.isSpan){
                    $(_this).focus(function () {var pattern = new RegExp("^" + defaultValue + "$|^$");
                        pattern.test($(_this).val()) && $(_this).val('').css('color', defaultColor);
                    }).blur(function () {if($(_this).val() == defaultValue) {
                            $(_this).css('color', defaultColor);
                        }else if($(_this).val().length == 0) {
                            $(_this).val(defaultValue).css('color', options.placeholderColor)
                        }
                    }).trigger('blur');
                }else{var $simulationSpan = $('<span class="wrap-placeholder">'+defaultValue+'</span>');
                    $simulationSpan.css({'position':'absolute','display':'inline-block','overflow':'hidden','width':$(_this).outerWidth(),'height':$(_this).outerHeight(),'color':options.placeholderColor,'margin-left':$(_this).css('margin-left'),'margin-top':$(_this).css('margin-top'),'padding-left':parseInt($(_this).css('padding-left')) + 2 + 'px','padding-top':_this.nodeName.toLowerCase() == 'textarea' ? parseInt($(_this).css('padding-top')) + 2 : 0,'line-height':_this.nodeName.toLowerCase() == 'textarea' ? $(_this).css('line-weight') : $(_this).outerHeight() + 'px','font-size':$(_this).css('font-size'),'font-family':$(_this).css('font-family'),'font-weight':$(_this).css('font-weight')
                    });//通过before把当前$simulationSpan添加到$(_this)前面，并让$(_this)聚焦$(_this).before($simulationSpan.click(function () {
                        $(_this).trigger('focus');
                    }));//当前输入框聚焦文本内容不为空时，模拟span隐藏$(_this).val().length != 0 && $simulationSpan.hide();if (options.onInput) {//绑定oninput/onpropertychange事件var inputChangeEvent = typeof(_this.oninput) == 'object' ? 'input' : 'propertychange';
                        $(_this).bind(inputChangeEvent, function () {
                            $simulationSpan[0].style.display = $(_this).val().length != 0 ? 'none' : 'inline-block';
                        });
                    }else {
                        $(_this).focus(function () {
                            $simulationSpan.hide();
                        }).blur(function () {/^$/.test($(_this).val()) && $simulationSpan.show();
                        });
                    };
                }
            }
        });
    }
})(jQuery);
로그인 후 복사
그러나 하위 버전에서는 브라우저가 이 placeholder 속성을 ​​지원하지 않습니다. 하위 버전 브라우저에서 placeholder와 동일한 효과를 얻으려면 다음을 작성해야 합니다. 플러그인이 호환되도록 하려면 jquery를 사용하여 이 시뮬레이션 효과를 얻는 방법에 대해 이야기해 보겠습니다.

이 시뮬레이션 효과를 얻으려면 페이지의 일반적인 호출 방법: 
$("#username").placeholder({
    isSpan:true});
로그인 후 복사

먼저 jquery 플러그인의 일반 구조를 작성합니다. 🎜🎜rrreee🎜🎜 다음으로 브라우저가 자리표시자 속성. 🎜🎜rrreee🎜🎜다음과 같이 체인 작업을 지원하려고 합니다. 🎜🎜rrreee🎜🎜기본 구성 항목: 🎜🎜rrreee🎜🎜 자리 표시자 효과를 시뮬레이션하기 위해 범위를 사용할 필요가 없는 경우 , 입력해야 합니다. 상자의 값으로 판단하면 다음 코드입니다. 🎜🎜rrreee🎜🎜 placeholder 효과를 시뮬레이션하기 위해 범위 태그를 사용해야 하는 경우 코드는 다음과 같습니다. : 🎜🎜rrreee🎜🎜전체 코드: 🎜🎜rrreee🎜🎜호출 방법, 범위 태그를 통해 시뮬레이션해야 하는 경우: 🎜🎜rrreee🎜🎜🎜

위 내용은 jQuery 캡슐화 자리 표시자의 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
firefox jquery placeholder
원천：php.cn
이전 기사：jquery에서 일반적으로 사용되는 함수는 무엇입니까? 다음 기사：js ES6의 let 명령 사용에 대한 자세한 설명
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
캐릭터 카운터가 100에 도달하면 버튼 표시 텍스트 영역에 최소 문자 수를 작성한 후 "제출" 버튼을 표시해야 하는 퀴즈 페이지를 만들려고 합니다. 내가 시도했지만 제대로 작동하지 못했습니...
에서 2024-04-02 18:03:39
0
1
390
JavaScript 테스트에서는 일관성이 있다고 주장하는 반면 HTML 입력 모드에서는 일관성이 없다고 주장합니다. 비밀번호 입력에 대한 패턴 일치를 시도하고 있는데 HTML에서는 불일치가 있다고 주장하는 반면 JavaScript에서는 일치한다고 주장합니다. regexr.com...
에서 2024-04-02 08:50:49
0
1
287
새 구성 요소를 동적으로 생성하는 것이 svelte에서 작동하지 않습니다. 그래서 버튼을 눌렀을 때 새로운 컴포넌트를 생성하려고 합니다. 버튼이 있는 위치는 다음과 같습니다. <inputtype="color"id=...
에서 2024-03-31 12:52:32
0
1
407
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿