javascriptformscharacterkeyup
how do i use key up function on 3 different text fields on the same page?
I have 3 text fields and i am using the following javascript to calculate the remaining character of english and chinese characters so it changes to 160 charracters or 70 characters based on unicode. That is not the problem. The problem is they keyup function seems to work on only one of the field. it doesn't work in all three. please help ? Thanls a lot in advance
<script type="text/javascript">
(function($){
$.fn.smsArea = function(options){
var
e = this,
cutStrLength = 0,
s = $.extend({
cut: true,
maxSmsNum: 2,
interval: 400,
counters: {
message: $('#smsCount'),
character: $('#smsLength')
},
lengths: {
ascii: [160, 306, 459],
unicode: [70, 134, 201]
}
}, options);
$('#day1content').keyup(function(){
clearTimeout(this.timeout);
this.timeout = setTimeout(function(){
var
smsType,
smsLength = 0,
smsCount = -1,
charsLeft = 0,
text = $('#day1content').val(),
isUnicode = false;
for(var charPos = 0; charPos < text.length; charPos++){
switch(text[charPos]){
case "\n":
case "[":
case "]":
case "\\":
case "^":
case "{":
case "}":
case "|":
case "€":
smsLength += 2;
break;
default:
smsLength += 1;
}
//!isUnicode && text.charCodeAt(charPos) > 127 && text[charPos] != "€" && (isUnicode = true)
if(text.charCodeAt(charPos) > 127 && text[charPos] != "€")
isUnicode = true;
}
if(isUnicode) smsType = s.lengths.unicode;
else smsType = s.lengths.ascii;
for(var sCount = 0; sCount < s.maxSmsNum; sCount++){
cutStrLength = smsType[sCount];
if(smsLength <= smsType[sCount]){
smsCount = sCount + 1;
charsLeft = smsType[sCount] - smsLength;
break
}
}
if(s.cut) $('#day1content').val(text.substring(0, cutStrLength));
smsCount == -1 && (smsCount = s.maxSmsNum, charsLeft = 0);
s.counters.message.html(smsCount);
s.counters.character.html(charsLeft);
}, s.interval)
}).keyup()
}}(jQuery));
//Start
$(function(){
$('#day1content').smsArea({maxSmsNum:2});
});
<script type="text/javascript">
</script>
<script type="text/javascript>
(function($){
$.fn.smsArea = function(options){
var
e = this,
cutStrLength = 0,
s = $.extend({
cut: true,
maxSmsNum: 2,
interval: 400,
counters: {
message: $('#smsCount2'),
character: $('#smsLength2')
},
lengths: {
ascii: [160, 306, 459],
unicode: [70, 134, 201]
}
}, options);
$('#day2content').keyup(function(){
clearTimeout(this.timeout);
this.timeout = setTimeout(function(){
var
smsType,
smsLength = 0,
smsCount2 = -1,
charsLeft2 = 0,
text = $('#day2content').val(),
isUnicode = false;
for(var charPos = 0; charPos < text.length; charPos++){
switch(text[charPos]){
case "\n":
case "[":
case "]":
case "\\":
case "^":
case "{":
case "}":
case "|":
case "€":
smsLength += 2;
break;
default:
smsLength += 1;
}
//!isUnicode && text.charCodeAt(charPos) > 127 && text[charPos] != "€" && (isUnicode = true)
if(text.charCodeAt(charPos) > 127 && text[charPos] != "€")
isUnicode = true;
}
if(isUnicode) smsType = s.lengths.unicode;
else smsType = s.lengths.ascii;
for(var sCount = 0; sCount < s.maxSmsNum; sCount++){
cutStrLength = smsType[sCount];
if(smsLength <= smsType[sCount]){
smsCount2 = sCount + 1;
charsLeft2 = smsType[sCount] - smsLength;
break
}
}
if(s.cut) $('#day2content').val(text.substring(0, cutStrLength));
smsCount2 == -1 && (smsCount2 = s.maxSmsNum, charsLeft2 = 0);
s.counters.message.html(smsCount2);
s.counters.character.html(charsLeft2);
}, s.interval)
}).keyup()
}}(jQuery));
//Start
$(function(){
$('#day2content').smsArea({maxSmsNum:2});
});
</script>
<script type="text/javascript">
(function($){
$.fn.smsArea = function(options){
var
e = this,
cutStrLength = 0,
s = $.extend({
cut: true,
maxSmsNum: 2,
interval: 400,
counters: {
message: $('#smsCount3'),
character: $('#smsLength3')
},
lengths: {
ascii: [160, 306, 459],
unicode: [70, 134, 201]
}
}, options);
$('#day3content').keyup(function(){
clearTimeout(this.timeout);
this.timeout = setTimeout(function(){
var
smsType,
smsLength = 0,
smsCount2 = -1,
charsLeft2 = 0,
text = $('#day3content').val(),
isUnicode = false;
for(var charPos = 0; charPos < text.length; charPos++){
switch(text[charPos]){
case "\n":
case "[":
case "]":
case "\\":
case "^":
case "{":
case "}":
case "|":
case "€":
smsLength += 2;
break;
default:
smsLength += 1;
}
//!isUnicode && text.charCodeAt(charPos) > 127 && text[charPos] != "€" && (isUnicode = true)
if(text.charCodeAt(charPos) > 127 && text[charPos] != "€")
isUnicode = true;
}
if(isUnicode) smsType = s.lengths.unicode;
else smsType = s.lengths.ascii;
for(var sCount = 0; sCount < s.maxSmsNum; sCount++){
cutStrLength = smsType[sCount];
if(smsLength <= smsType[sCount]){
smsCount3 = sCount + 1;
charsLeft3 = smsType[sCount] - smsLength;
break
}
}
if(s.cut) $('#day3content').val(text.substring(0, cutStrLength));
smsCount3 == -1 && (smsCount3 = s.maxSmsNum, charsLeft3 = 0);
s.counters.message.html(smsCount3);
s.counters.character.html(charsLeft3);
}, s.interval)
}).keyup()
}}(jQuery));
//Start
$(function(){
$('#day3content').smsArea({maxSmsNum:2});
});
</script><form method="post" action="">
<table class="table">
<tr style="background:#3C8DBC;">
<th>Day 1</th>
</tr>
<tr>
<td>
<div class="form-group row">
<label for="day1content" class="col-sm-2 col-form-label">Content:</label>
<div class="col-sm-3">
<textarea name="day1content" id="day1content" width="300px" cols="60" rows="8" id="content"></textarea>
Characters left: (<b id="smsLength"></b>)
<b id="smsCount"></b> /2 SMS <br />
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-group row">
<label for="content2" class="col-sm-2 col-form-label">Content:</label>
<div class="col-sm-3">
<textarea name="day2content" id="day2content" width="300px" cols="60" rows="8" id="content"></textarea>
Characters left: (<b id="smsLength2"></b>)
<b id="smsCount2"></b> /2 SMS <br />
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-group row">
<label for="day3content" class="col-sm-2 col-form-label">Content:</label>
<div class="col-sm-3">
<textarea name="day3content" id="day3content" width="300px" cols="60" rows="8" id="content"></textarea>
Characters left: (<b id="smsLength3"></b>)
<b id="smsCount3"></b> /2 SMS <br />
</div>
</div>
</td>
</tr>Solution
i dont know why you are recreating the plugin smsArea multiple time for each input, this is actually the problem, if you want the code to run like this you can change the names of the plugins to smsArea1,2, etc and then make each input call its own plugin, but thats not a good practice
a better way is to just have one plugin and feed it with any specific options you want for each input
here is a working example
(function ($) {
$.fn.smsArea = function (options) {
var
e = this,
cutStrLength = 0,
s = $.extend({
cut: true,
maxSmsNum: 2,
interval: 400,
lengths: {
ascii: [160, 306, 459],
unicode: [70, 134, 201]
}
}, options);
$(this).keyup(function () {
var $this = $(this);
clearTimeout(this.timeout);
this.timeout = setTimeout(function () {
var
smsType,
smsLength = 0,
smsCount = -1,
charsLeft = 0,
text = $this.val(),
isUnicode = false;
for (var charPos = 0; charPos < text.length; charPos++) {
switch (text[charPos]) {
case "\n":
case "[":
case "]":
case "\\":
case "^":
case "{":
case "}":
case "|":
case "€":
smsLength += 2;
break;
default:
smsLength += 1;
}
//!isUnicode && text.charCodeAt(charPos) > 127 && text[charPos] != "€" && (isUnicode = true)
if (text.charCodeAt(charPos) > 127 && text[charPos] != "€")
isUnicode = true;
}
if (isUnicode) smsType = s.lengths.unicode;
else smsType = s.lengths.ascii;
for (var sCount = 0; sCount < s.maxSmsNum; sCount++) {
cutStrLength = smsType[sCount];
if (smsLength <= smsType[sCount]) {
smsCount = sCount + 1;
charsLeft = smsType[sCount] - smsLength;
break
}
}
if (s.cut) $this.val(text.substring(0, cutStrLength));
smsCount == -1 && (smsCount = s.maxSmsNum, charsLeft = 0);
s.counters.message.html(smsCount);
s.counters.character.html(charsLeft);
}, s.interval)
}).keyup()
}
}(jQuery));
//Start
$(function () {
$('#day1content').smsArea({
maxSmsNum: 2,
counters: {
message: $('#smsCount'),
character: $('#smsLength')
}
});
$('#day2content').smsArea({
maxSmsNum: 2,
counters: {
message: $('#smsCount2'),
character: $('#smsLength2')
}
});
$('#day3content').smsArea({
maxSmsNum: 2,
counters: {
message: $('#smsCount3'),
character: $('#smsLength3')
}
});
});- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices