0
여기에 최대 텍스트 길이의 텍스트 영역이 있습니다. http://jsfiddle.net/73r8G/ 이것을 Jquery 플러그인으로 변환하려고합니다. 120 행 이후에 textarea 상자의 업데이트 된 내용을 참조해야하지만 어떻게해야할지 모르겠습니다. 내 목표는 내 코드에서 ('.user_text') 및 ('.user_text_remaining')을 대체하는 것입니다. 지금까지Jquery Plugin 새로 고침 변수
내 코드 :
<!DOCTYPE HTML>
<html>
<head>
<title>Textarea Limits</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
(function($){
$('.user_text').val('');
$.fn.truncate = function(options) {
var defaults = {
limit: 140
};
var options = $.extend(defaults, options);
return this.each(function() {
var options_limit = options.limit;
//alert(options_limit);
obj= $(this);
var content = obj.html();
var fieldSelection = {
getSelection: function() {
var e = (this.jquery) ? this[0] : this;
return (/* mozilla/dom 3.0 */ ('selectionStart' in e &&
function() {
var l = e.selectionEnd - e.selectionStart;
return {
start: e.selectionStart,
end: e.selectionEnd,
length: l,
text: e.value.substr(e.selectionStart, l)
};
}) || /* exploder */ (document.selection &&
function() {
e.focus();
var r = document.selection.createRange();
if (r === null) {
return {
start: 0,
end: e.value.length,
length: 0
}
}
var re = e.createTextRange();
var rc = re.duplicate();
re.moveToBookmark(r.getBookmark());
rc.setEndPoint('EndToStart', re);
return {
start: rc.text.length,
end: rc.text.length + r.text.length,
length: r.text.length,
text: r.text
};
}) || /* browser not supported */
function() {
return null;
})();
}
};
jQuery.each(fieldSelection, function (i) {
jQuery.fn[i] = this;
});
function textAreaLength(options_limit, content) {
var user_text_count = $('.user_text').val().length;
if (options_limit - user_text_count <= 1) {
var determineCharacters = "character";
} else {
determineCharacters = "characters";
}
$('.user_text_remaining').html(options_limit - user_text_count + " " + determineCharacters + " left");
}
function textCleanup(content) {
setTimeout(function() {
if (content.length > options_limit) {
trimmed = content.substr(0, options_limit);
$(this).val(trimmed);
}
}, 10);
setTimeout(function() {
textAreaLength(options_limit, content)
}, 20);
}
var keys = [],
counter17 = 0,
presence = 0;
function printKeys() {
var html = '';
var keycount = 0;
for (var i in keys) {
keycount += 1;
//counter17 indicates the ctrl key
if (i == 17) counter17 += 1;
//presence indicates certain key presses; presence = 2 indicates ctrl; presence = 3 indicates ctrl and v
if (counter17 >= 1) {
presence = 2;
if (i == 86 || i == 118) {
presence = 3;
}
}
}
return presence;
}
//Keypress is used for Opera; ok for Firefox too
$(this).bind("keypress keydown", function (event) {
/*
want to refer to updated content in the textarea
*/
if ($(this).getSelection().text == "" && $(this).val().length >= options_limit) {
//textarea is full; no more ctrl v
if ((event.which === 86 || event.which == 118) && event.ctrlKey) {
event.preventDefault();
} else {
//preserve some keys after textarea is full; f5, arrows, backspace
if (event.which == 116 || event.which == 0 || event.which == 33 || event.which == 34 || event.which == 35 || event.which == 36 || event.which == 37 || event.which == 38 || event.which == 39 || event.which == 40 || event.which == 8) {
event
} else {
//single key presses are forbidden when textarea is full
if ((event.ctrlKey) == false) {
event.preventDefault();
}
}
}
}
textCleanup(content);
}).keyup(function (e) {
position = 2;
delete keys[e.which];
});
//For IE and Chrome
$(this).on('paste', function (event) {
if ($(this).getSelection().text == "" && $(this).val().length >= options_limit) {
event.preventDefault();
}
textCleanup(content);
});
});
};
})(jQuery);
$('.user_text').truncate({
limit: 150
});
});
</script>
<form name="myform" action="#">
<textarea class="user_text" name="limitedtextarea" cols="100" rows="10"></textarea>
</form>
<p class="user_text_remaining">150 characters left</p>
</body>
</html>