nuijs
Version:
nui框架
267 lines (261 loc) • 9.87 kB
JavaScript
/**
* @author Aniu[2016-11-10 22:39]
* @update Aniu[2017-12-22 10:17]
* @version 1.0.1
* @description 输入框占位符
*/
Nui.define(function(require){
this.imports('../assets/components/placeholder/index');
var component = require('../core/component');
var util = require('../core/util');
var supportPlaceholder = util.supportHtml5('placeholder', 'input');
return this.extend(component, {
_options:{
/**
* @func 输入框占位提示文本，若元素上含有placeholder属性将会覆盖该值
* @type <String>
*/
text:'',
/**
* @func 是否启用动画形式展示
* @type <Boolean>
*/
animate:false,
/**
* @func 输入框值是否可以和占位符相同
* @type <Boolean>
*/
equal:true,
/**
* @func 销毁或者重置组件是否还原默认值
* @type <Boolean>
*/
restore:true,
/**
* @func 占位符文本颜色
* @type <String>
*/
color:'#ccc',
/**
* @func 调用value方法后执行回调
* @type <Function>
*/
onChange:null
},
_template:{
wrap:'<span class="<% className %>" style="<%include \'style\'%>" />',
elem:'<b class="con-placeholder-text" style="<%include \'style\'%>"><%text%></b>'
},
_events:{
'click b':'_focus',
'focus :input':'_indent',
'blur :input':'_blur _input',
'keyup :input':'_input'
},
_data:{},
_exec:function(){
var self = this, opts = self._options, target = self._getTarget();
if(target){
var text = self._defaultText = target.attr('placeholder');
if(!self._defaultText && opts.text){
target.attr('placeholder', text = opts.text)
}
self._val = target.val();
if(self._defaultValue === undefined){
self._defaultValue = self._val;
}
self._text = Nui.trim(text||'');
self._setData();
self._create()
}
},
_setData:function(){
var self = this, _class = self.constructor, height = self.target.height();
self._textarea = self.target.is('textarea');
var top = _class._getSize(self.target, 't', 'padding')+_class._getSize(self.target, 't');
if(Nui.bsie7 && 'left right'.indexOf(self.target.css('float')) === -1){
top += 1
}
self._data = {
'top':top+'px',
'height':self._textarea ? 'auto' : height+'px',
'line-height':self._textarea ? 'normal' : height+'px'
}
},
_create:function(){
var self = this, opts = self._options, _class = self.constructor;
if(self._condition()){
var data = self._tplData();
data.style = {
// 'width':self.target.outerWidth()+'px',
// 'height':self.target.outerHeight()+'px'
}
self.element = self.target.wrap(self._tpl2html('wrap', data)).parent();
self._createElems();
self._event()
}
else if(self._text && opts.color){
self._setStyle()
}
},
_focus:function(){
if(!this._disabled()){
this.target.focus()
}
},
_blur:function(){
delete this.constructor._active;
return true
},
_indent:function(){
var _class = this.constructor;
if(this._options.animate && this.$text){
_class._active = this.target;
this.$text.stop(true, false).animate({left:this._pLeft+10, opacity:'0.5'});
}
},
_input:function(){
var val = this._val = this.target.val(), _class = this.constructor;
if((!this._options.equal && val === this._text) || !val){
this.target.val('');
if(this.$text){
this.$text.show();
if(this._options.animate){
if(_class._active){
this.$text.css({left:this._pLeft+10, opacity:'0.5'})
}
else{
this.$text.stop(true, false).animate({left:this._pLeft, opacity:'1'})
}
}
}
}
else if(this.$text){
this.$text.hide()
}
},
_condition:function(){
return this._options.animate || !supportPlaceholder
},
_createElems:function(){
var opts = this._options;
if(this._text){
if(opts.animate || !supportPlaceholder){
this.target.removeAttr('placeholder');
this._createText();
}
else if(opts.color){
this._setStyle()
}
}
},
_createText:function(){
var self = this, opts = self._options, _class = self.constructor;
self._pLeft = _class._getSize(this.target, 'l', 'padding') + _class._getSize(this.target, 'l');
self.$text = $(self._tpl2html('elem', {
text:self._text,
style:Nui.extend({
left:_class._getSize(self.target, 'l', 'padding')+_class._getSize(self.target, 'l')+'px',
color:opts.color,
display:self._val ? 'none' : 'inline'
}, self._data)
})).appendTo(self.element)
},
_setStyle:function(){
var self = this, opts = self._options;
self.className = '_nui_'+ self.constructor.__component_name +'_'+self.__id;
self.target.addClass(self.className);
if(!self.constructor.sheet){
self._createStyle()
}
self._createRules()
},
_createStyle:function(){
var self = this, sheet;
if(document.createStyleSheet){
sheet = document.createStyleSheet()
}
else{
var style = document.createElement('style');
document.head.appendChild(style);
sheet = style.sheet;
}
self.constructor.sheet = sheet
},
_createRules:function(){
var self = this;
var sheet = self.constructor.sheet;
Nui.each(['::-webkit-input-placeholder', ':-ms-input-placeholder', '::-moz-placeholder'], function(v){
var selector = '.'+self.className+v;
var rules = 'opacity:1; color:'+(self._options.color||'');
try{
if(sheet.addRule){
sheet.addRule(selector, rules)
}
else if(sheet.insertRule){
sheet.insertRule(selector + '{' + rules + '}')
}
self._cssRuleSelector = selector
}
catch(e){
}
})
},
_deleteRule:function(){
var self = this;
var sheet = self.constructor.sheet;
var selector = self._cssRuleSelector;
if(sheet && selector !== undefined){
try{
var rules = sheet.cssRules;
for(var i=0; i<rules.length; i++){
if(rules[i].selectorText === selector){
if(sheet.deleteRule){
sheet.deleteRule(i)
}
else if(sheet.removeRule){
sheet.removeRule(i)
}
delete self._cssRuleSelector;
break;
}
}
}
catch(e){
}
}
},
_reset:function(){
var self = this;
self._off();
if(self.$text){
self.$text.remove()
}
if(self.target){
self.target.removeClass(self.className);
self._deleteRule()
if(self.element){
self.target.unwrap();
self.element = null
}
if(self._options.restore === true){
self.target.val(self._defaultValue)
}
if(self._defaultText){
self.target.attr('placeholder', self._defaultText)
}
else{
self.target.removeAttr('placeholder')
}
}
},
value:function(val){
var _class = this.constructor, target = this.target;
if(arguments.length){
target.val(val)
}
this._input();
this._callback('Change');
}
})
})