添加计数器到HTML表格并计算积分 [英] Adding Counter to HTML Form and Calculate Credits

问题描述

我有一个简单的HTML表单，允许用户输入一些文本，然后通过短信网关以SMS / TXT消息的形式发送。用户将消息文本输入到textarea中：

 < textarea rows =10cols =40id = smsbodyvalidate =required：truename =MessageBody>< / textarea> 
  

他们可以输入尽可能少或更多的文字，但每个短信限制为160字符我想显示一个字符计数器，显示输入的字符数量，然后计算将使用多少个SMS信用。计算积分的公式基于输入的积分总数：如果消息超过160个字符，它将被拆分为多个消息部分。每个消息部分的长度限制为153个字符（标题为7个字节）。因此，160个字符的消息将是1个信用点，306个字符将是2个信用点，459个字符将是3个信用点等。

理想情况下，我希望显示以这种格式：

0个字符，1条短信
200个字符，2条短信

我已经在使用jQuery，很高兴使用基于jQuery的解决方案。

非常感谢，
Steve

解决方案

类似这样的事情？

试试看： http://jsfiddle.net/kG8U2/2

我认为我对1条消息的理解正确，它可以是160个字符，但对于多个消息，字符数除以153。

HTML

 < textarea rows =10cols =40id =smsbodyvalidate =required ：truename =MessageBody>< / textarea> 
< div id ='message'> 
< span id ='char'> 0< / span>字符，
< span id ='msgs'> 0< / span> SMS消息，
< span id ='remg'> 160< / span>剩余的
< / div> 
  

jQuery

  var $ chars = $（'＃char'）; 
 var $ msgs = $（'＃msgs'）; 
 var $ remg = $（'＃remg'）; 
 
 $（'＃smsbody'）。keyup（function（evt）{
 var len = this.value.length; 
 $ chars.text（len）; 
 if（len <= 160）{
 $ msgs.text（1）; 
 $ remg.text（160-len）; 
} else {
 var multi = Math.ceil（（len / 153））; 
 $ msgs.text（multi）; 
 $ remg.text（（multi * 153） -  len）; 
} 
}）; 
  

---

编辑： 修正了1个字符的缺陷，并添加了剩余的计数器以获得乐趣。

I have a simple HTML Form that allows the user to enter some text which is then sent as an SMS/TXT Message via an SMS Gateway. The user enters the message text into a textarea:

<textarea rows="10" cols="40" id="smsbody" validate = "required:true" name="MessageBody"></textarea>

They can enter as little or as much text as they like, however as each SMS is limited to 160 characters I would like to display a character counter that shows both the number of characters entered and then also calculates how many SMS credits this will use. The formula for calculating the credits is based on the total number of credits entered: if a message exceeds 160 characters, it will be split into multiple message parts. Each message part is restricted to 153 characters in length (7 bytes for headers). So a message of 160 characters will be 1 credit, 306 characters will be 2 credits, 459 characters will be 3 credits and so on.

Ideally I would like this to appear in this format:

0 characters, 1 SMS message(s) 200 characters, 2 SMS message(s)

I'm already using jQuery so happy to use a jQuery based solution as well.

Many thanks, Steve

解决方案

Something like this?

Try it out: http://jsfiddle.net/kG8U2/2

I think I understand correctly in that for 1 message, it can be 160 characters, but for more than one, the number of messages is characters divided by 153.

HTML

<textarea rows="10" cols="40" id="smsbody" validate = "required:true" name="MessageBody"></textarea>
<div id='message'>
    <span id='char'>0</span> characters,
    <span id='msgs'>0</span> SMS message(s),
    <span id='remg'>160</span> remaining
</div>​​​​

jQuery

var $chars = $('#char');
var $msgs = $('#msgs');
var $remg = $('#remg');

$('#smsbody').keyup(function(evt) {
    var len = this.value.length;
    $chars.text(len);
    if(len <= 160) {
        $msgs.text(1);
        $remg.text(160 - len);
    } else {
        var multi = Math.ceil((len/153)) ;
        $msgs.text(multi);
        $remg.text((multi * 153) - len);
    }
});​

---

EDIT: Fixed a flaw where it was off by 1 character, and added a remaining counter for fun.

这篇关于添加计数器到HTML表格并计算积分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！