Skip to content

Commit 9cdfc8a

Browse files
author
tg0825
committed
add example
1 parent 35cbec0 commit 9cdfc8a

File tree

3 files changed

+96
-10
lines changed

3 files changed

+96
-10
lines changed

‎example/index.html

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>jQuery.maxlength</title>
7+
<script src="https://unpkg.com/jquery@1.12.4/dist/jquery.js"></script>
8+
<script src="./jQuery.maxlength.js"></script>
9+
<style>
10+
</style>
11+
</head>
12+
<body>
13+
<div>
14+
<input
15+
type="number"
16+
maxlength="10"
17+
>
18+
</div>
19+
20+
<div>
21+
<span
22+
data-val-length="parent"
23+
>
24+
</span>
25+
<input
26+
type="text"
27+
maxlength="20"
28+
>
29+
</div>
30+
31+
<div>
32+
<textarea maxlength="50" name="" id="" cols="30" rows="10"></textarea>
33+
</div>
34+
<script>
35+
$('div').maxlength();
36+
</script>
37+
</body>
38+
</html>

‎jQuery.maxlength-0.1.js ‎example/jQuery.maxlength.js

+12-10
Original file line numberDiff line numberDiff line change
@@ -22,21 +22,23 @@
2222
var $parent = $wrap.find(settings.parent);
2323
var maxLength = $val.attr('maxlength') || 'maxlength를 설정해주세요';
2424

25-
$parent.length ? $parent.append(counterElm) : $wrap.append(counterElm);
26-
$wrap.find(settings.target).html($val.val().length);
27-
$wrap.find(settings.maxTarget).html('/' + maxLength);
25+
if (!$wrap.find('.text-limit').length) {
26+
$parent.length ? $parent.append(counterElm) : $wrap.append(counterElm);
27+
$wrap.find(settings.target).html($val.val().length);
28+
$wrap.find(settings.maxTarget).html('/' + maxLength);
2829

29-
$wrap.on('keyup', settings.valName, function (e) {
30-
var input = e.currentTarget;
31-
var val = input.value;
32-
if (val.length > maxLength) input.value = val.substr(0, maxLength);
33-
$wrap.find(settings.target).html(input.value.length);
34-
});
30+
$wrap.on('keyup', settings.valName, function (e) {
31+
var input = e.currentTarget;
32+
var val = input.value;
33+
if (val.length > maxLength) input.value = val.substr(0, maxLength);
34+
$wrap.find(settings.target).html(input.value.length);
35+
});
36+
}
3537
});
3638
};
3739

3840
$.fn.maxlength.defaults = {
39-
valName: '[data-val-length=val]',
41+
valName: '[maxlength]',
4042
target: '[data-val-length=target]',
4143
maxTarget: '[data-val-length=max]',
4244
parent: '[data-val-length=parent]',

‎jQuery.maxlength.js

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
(function($){
2+
/**
3+
* 최대 글자 수, 현재 글자 수 표시
4+
* @param {Object} options 옵션
5+
* @return {Object} jQuery Object this;
6+
*/
7+
$.fn.maxlength = function (options){
8+
var settings = $.extend(
9+
{},
10+
$.fn.maxlength.defaults,
11+
options
12+
);
13+
14+
var counterElm = '<span class="text-limit">' +
15+
'<span data-val-length="target"></span>' +
16+
'<span data-val-length="max"></span>' +
17+
'</span>';
18+
19+
return this.each(function () {
20+
var $wrap = $(this);
21+
var $val = $wrap.find('[maxlength]');
22+
var $parent = $wrap.find(settings.parent);
23+
var maxLength = $val.attr('maxlength') || 'maxlength를 설정해주세요';
24+
25+
if (!$wrap.find('.text-limit').length) {
26+
$parent.length ? $parent.append(counterElm) : $wrap.append(counterElm);
27+
$wrap.find(settings.target).html($val.val().length);
28+
$wrap.find(settings.maxTarget).html('/' + maxLength);
29+
30+
$wrap.on('keyup', settings.valName, function (e) {
31+
var input = e.currentTarget;
32+
var val = input.value;
33+
if (val.length > maxLength) input.value = val.substr(0, maxLength);
34+
$wrap.find(settings.target).html(input.value.length);
35+
});
36+
}
37+
});
38+
};
39+
40+
$.fn.maxlength.defaults = {
41+
valName: '[maxlength]',
42+
target: '[data-val-length=target]',
43+
maxTarget: '[data-val-length=max]',
44+
parent: '[data-val-length=parent]',
45+
};
46+
})(jQuery);

0 commit comments

Comments
 (0)