如何显示短信号码并限制在文本区域写入一定数量的短信?

时间:2016-11-28 19:16:56

标签: javascript jquery asp.net

我想允许用户使用TextArea将最多6条SMS写入我的Web应用程序。这里,每个短信长度为160个字符,我想将其显示为当前短信号码/ 6。当用户到达第6个SMS时,应用程序不应允许他们为第7个SMS写入。 我已经编写了Javascript以获取剩余的字符编号并将其显示在一个框中。这是我的代码:

<script type="text/javascript">
    function textCounter(field, countfield, maxlimit) {
        if (field.value.length > maxlimit)
            field.value = field.value.substring(0, maxlimit);
        else
            countfield.value = maxlimit - field.value.length;
    }
</script>


<asp:TextBox ID="txtMessage" runat="server" Width="300px" Height="150px" onkeyup="showPrevMsg(this.value);"
onkeydown="textCounter(this, this.form.remLen, 160);" onfocus="textCounter(this, this.form.remLen, 160);" onblur="textCounter(this, this.form.remLen, 160);" placeholder="Please enter the body of your message here" CssClass="form-control" TextMode="MultiLine"></asp:TextBox>


<input readonly="readonly" type="text" name="remLen" size="3" maxlength="3" value="160" />
characters left

但是上面我只能得到160个剩余的字符。我还需要显示6个例如1/6中已经写出了多少个短信,并且限制用户使用第6个短信。请帮帮我。感谢。

2 个答案:

答案 0 :(得分:0)

我已经做了一些事来解决我自己的问题。在这里,我发布我的解决方案,以防它可以帮助其他人。

我已经创建了这个javascript函数来计算消息的一部分。由于我不熟悉Javascript或Jquery,所以我已经用这种方式完成了这项工作(也许可以用简单的方式完成)。

 <asp:TextBox ID="txtMessage" runat="server" Width="300px" Height="150px" onkeyup="showPrevMsg(this.value);"onkeydown="textCounter(this, this.form.remLen, 960);msgCounter(this,this.form.msgNumCount);" onfocus="textCounter(this, this.form.remLen, 960);msgCounter(this,this.form.msgNumCount);" onblur="textCounter(this, this.form.remLen, 960);msgCounter(this,this.form.msgNumCount);" placeholder="Please enter the body of your message here" CssClass="form-control" TextMode="MultiLine"></asp:TextBox>

从asp文本框我调用两个javascript函数来实现这样的目标:

listD = [[[[53, 54], [129, 130]]], 
     [[[51, 51], [132, 132]]], 
     [[[39, 39], 
       [144, 144]], 
      [[53, 54], 
       [129, 130]]], 
     [[[39, 39], [146, 146]], [[54, 54], [130, 130]]], 
     [[[54, 53], [130, 129]]], 
     [[[52, 52], [132, 132]]]
    ]

感谢大家花时间阅读本文。

答案 1 :(得分:0)

在这里,我有一个aspx页面,您可以在其中找到解决方案。你可以直接使用它。

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="JSDemo.Test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.6.4.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            document.getElementById("<%=txtMessage.ClientID%>").addEventListener("input", function (e) {
                if ($(this).val().length <= 160) {
                    $('#CharacterCount').html((160 - $(this).val().length) + ' characters left');
                    $('#SMSCount').html('1/6');
                } else if ($(this).val().length > 160 && $(this).val().length <= 320) {
                    $('#CharacterCount').html((320 - $(this).val().length) + ' characters left');
                    $('#SMSCount').html('2/6');
                } else if ($(this).val().length > 320 && $(this).val().length <= 480) {
                    $('#CharacterCount').html((480 - $(this).val().length) + ' characters left');
                    $('#SMSCount').html('3/6');
                } else if ($(this).val().length > 480 && $(this).val().length <= 640) {
                    $('#CharacterCount').html((640 - $(this).val().length) + ' characters left');
                    $('#SMSCount').html('4/6');
                } else if ($(this).val().length > 640 && $(this).val().length <= 800) {
                    $('#CharacterCount').html((800 - $(this).val().length) + ' characters left');
                    $('#SMSCount').html('5/6');
                } else if ($(this).val().length > 800 && $(this).val().length <= 960) {
                    $('#CharacterCount').html((960 - $(this).val().length) + ' characters left');
                    $('#SMSCount').html('6/6');
                } else {
                    e.preventDefault();
                    $('#CharacterCount').html('0 characters left');
                    $('#SMSCount').html('6/6');
                    alert('6 SMS has been completed!');
                    //
                    $(this).val($(this).val().substr(0,960));
                    return false;
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="txtMessage" runat="server" Width="300px" Height="150px" placeholder="Please enter the body of your message here" CssClass="form-control" TextMode="MultiLine"></asp:TextBox>
            <span id="CharacterCount"></span>
            <br />
            <span id="SMSCount"></span>
        </div>
    </form>
</body>
</html>