<html>
<head>
<meta charset="UTF-8">
<title>彈性textarea</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="../core/css/base_new.css">
</head>
<body>
<nav></nav>
<textarea style="width:300px;" placeholder="在這裏輸入" id="ta"></textarea>
<p>還能輸入<span id="left">200</span>個字符</p>
<script src='js/zepto.min.js'></script>
<script src='./js/zepto.flexTextarea.js'></script>
<script>
/*
使用方法
目前textarea需要指定width，否則會有bug，後續再看是否有更好的解決方案
$(function(){
$("#textarea").flexTextarea({
//字長限制
maxLength: 120,
//剩餘字長回調
leftLength: function(value){
console.log(value)
}
});
});
*/
$(function(){
$('#ta').flexTextarea({
maxLength: 200,
leftLength: function(value){
$("#left").text(value+'');
}
});
});
</script>
</body>
</html>
/*
* @zepto.flexTextarea.js
*/
!(function($,window,undefined){
var store = [];
var FlexTextarea = function(options){
this.chineseAsTwo = options.chineseAsTwo;
this.callback = options.leftLength || new Function;
this.maxLength = options.maxLength;
this.$el = $(options.el);
this.$el.css('overflow','hidden');
this.initHeight = this.$el.height();
if(this.maxLength)
this.$el.attr('maxlength',this.maxLength);
this.$dummy = $(document.createElement('pre'));
this.$dummy.css({
'white-space': 'pre-wrap',
'white-space': '-moz-pre-wrap',
'white-space': '-pre-wrap',
'white-space': '-o-pre-wrap',
'word-wrap' : 'break-word',
'font-size' : this.$el.css('font-size'),
'width' : this.$el.css('width'),
'line-height': this.$el.css('line-height'),
'text-indent': this.$el.css('text-indent'),
'position' : 'absolute',
'z-index' : '-999',
'visibility' : 'hidden',
'top' : 0,
'left' : 0
});
$('body').append(this.$dummy);
var entered = false;
this.$el.on('input',$.proxy(this.checkHeight,this));
//init
this.checkHeight();
};
FlexTextarea.prototype.checkHeight = function(){
var targetLength = this.native2ascii();
if(this.maxLength)
var leftLength = this.maxLength - targetLength;
this.callback(leftLength);
};
FlexTextarea.prototype.native2ascii = function(){
var val = this.$el.val();
val = val.replace(/\n$/,'\n佔位');
this.$dummy.text(val+'');
if(this.initHeight <= this.$dummy.height())
this.$el.height(this.$dummy.height() + "px");
else
this.$el.height(this.initHeight + "px");
var nativecode = val.replace(/[\n]/g,"\s\s").replace(/佔位$/,"").split("");
var len = 0;
for ( var i = 0; i < nativecode.length; i++)
{
var code = Number (nativecode[i].charCodeAt (0));
if (code > 127 && !!this.chineseAsTwo){
len += 2;
}else{
len++;
}
}
return len;
};
$.fn.flexTextarea = function(options){
return this.each(function(idx,el){
options.el = el;
store.push(new FlexTextarea(options));
});
};
})($,window);
/*
使用方法
$(function(){
$("#textarea").flexTextarea({
//字長限制
maxLength: 120,
//剩餘字長回調
leftLength: function(value){
console.log(value)
}
});
});
*/
