gpt4 book ai didi

javascript - 如何在同一页面上的 3 个不同文本字段上使用按键功能?

转载 作者:行者123 更新时间:2023-12-03 04:47:29 27 4
gpt4 key购买 nike

我有3个文本字段,我使用以下javascript来计算英文和中文字符的剩余字符,因此它会根据unicode更改为160个字符或70个字符。这不是问题所在。问题是他们的 keyup 功能似乎只适用于其中一个字段。它在所有三个中都不起作用。请帮忙 ?提前非常感谢

enter image description here

<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>

最佳答案

我不知道为什么你要为每个输入多次重新创建插件 smsArea,这实际上是问题所在,如果你希望代码像这样运行,你可以将插件的名称更改为 smsArea1,2 等,然后让每个输入调用自己的插件,但这不是一个好习惯

更好的方法是只使用一个插件,并为每个输入提供您想要的任何特定选项

这是一个工作示例

(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')
}
});
});

关于javascript - 如何在同一页面上的 3 个不同文本字段上使用按键功能?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42807182/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com