Jquery 发送到电话单击链接以填充键盘表单中的文本字段

Posted 2023-03-21

技术标签:

【中文标题】Jquery 发送到电话单击链接以填充键盘表单中的文本字段【英文标题】：Jquery Send To Phone click link to populate text field in form for keypad 【发布时间】：2012-06-05 14:44:16 【问题描述】：

我似乎无法弄清楚。

我有一个模态键盘，可以提交到一个 php 表单，该表单将发送一封电子邮件，其中包含有关网站的信息。

我希望人们能够单击键盘将值插入文本字段区域。类似于喜欢使用手机。

我的 html：

<script src="http://www.busetopizza.com/demo/phone.js" type="text/javascript"></script>

<!-- Send To Phone -->
<form action="phpmailer.php" method="post" name="theform">

<input type="hidden" name="redirect" value="message_success.php">

<div class="send-to-phone-wrapper">
    <div class="send-to-phone">

        <div class="phone-top">

        <input type="text" id="phone" name="10digit" class="phone-enter-number" placeholder="Mobile Number"></div>



        <div class="buttons-wrapper">
            <div class="phone-button"><a href="#?stockAlert=1" class="coupon_link"><p>1<br /><span></span></p></a></div>
            <div class="phone-button"><a href="#?stockAlert=2" class="coupon_link"><p>2<br /><span>ABC</span></p></a></div>
            <div class="phone-button"><a href="#"><p>3<br /><span>DEF</span></p></a></div>
            <div class="phone-button"><a href="#"><p>4<br /><span>GHI</span></p></a></div>
            <div class="phone-button"><a href="#"><p>5<br /><span>JKL</span></p></a></div>
            <div class="phone-button"><a href="#"><p>6<br /><span>MNO</span></p></a></div>
            <div class="phone-button"><a href="#"><p>7<br /><span>PQR</span></p></a></div>
            <div class="phone-button"><a href="#"><p>8<br /><span>STU</span></p></a></div>
            <div class="phone-button"><a href="#"><p>9<br /><span>VXZ</span></p></a></div>
            <div class="phone-button-fix"><div class="phone-star"></div></div>
            <div class="phone-button"><a href="#"><p>0<br /><span style="font-size:23px; font-weight:100;">+</span></p></a></div>
            <div class="phone-button-fix"><div class="phone-pound"></div></div>
        </div>

        <div class="choose-carrier-wrapper">

            <div class="choose-carrier">
            <select name="carrier" class="choose-carrier-selections">
                <option value="none" class="choose-styled"></option>
                <option value="att" class="choose-styled">AT&amp;T</option>
                <option value="alltel" class="choose-styled">Alltel</option>
                <option value="cingular" class="choose-styled">Cingular</option>
                <option value="nextel" class="choose-styled">Nextel</option>
                <option value="sprint" class="choose-styled">Sprint</option>
                <option value="suncom" class="choose-styled">SunCom</option>
                <option value="tmobile" class="choose-styled">T-mobile</option>
                <option value="voicestream" class="choose-styled">VoiceStream</option>
                <option value="verizon" class="choose-styled">Verizon</option>
            </select>          
            </div>

               <div class="phone-submit"><input type="submit" value="" name="submit" class="submit-phone"></div>

        </div>


    </div>
</div>
</form>
<!-- End Send To Phone -->

我的 CSS：

/* Send To Phone
---------------------------------------------------------------------------------*/
.send-to-phone-wrapper 
    width:319px;
    margin:0 auto;


.send-to-phone 
    width:322px;
    padding:15px;
    background-color:#000;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    box-shadow: 0px 10px 30px #000;
   -webkit-box-shadow: 0px 10px 30px #000;
   -moz-box-shadow: 0px 10px 30px #000;


.phone-top 

.buttons-wrapper 
    width:321px;
    height:268px;
    background-color:#fff;
    border-right:1px solid #2d3136;

.phone-button 
    float:left;
    text-align:center;
    border-bottom:1px solid #000;
    border-left:1px solid #2d3136;
    border-right:1px solid #151b22;
    position:relative;    

.phone-button-fix 
    float:left;
    text-align:center;
    border-bottom:1px solid #000;
    border-left:1px solid #2d3136;
    border-right:1px solid #151b22;
    position:relative;    
    height:66px;
    width:105px;
    background:url(http://www.busetopizza.com/demo/sendtophone/bg-keypad.gif) repeat-x;    

.phone-button p 
    color:#FFF;
    font-size:30px;
    padding-top:14px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    line-height:23px;

.phone-button p span 
    color:#878b90;
    font-size:14px;
    text-shadow:0px -1px 0px #000;


.phone-button a:link, .phone-button a:visited 
    text-decoration:none;
    display:block;
    height:66px;
    width:105px;
    background:url(http://www.busetopizza.com/demo/sendtophone/bg-keypad.gif) repeat-x;

.phone-button a:hover 
    background:url(http://www.busetopizza.com/demo/sendtophone/bg-keypad2.gif) repeat-x;
    text-decoration:none;

.phone-button a:active 
    background-image:none;
    background-color:#3559c3;

.phone-button a:hover span  color:#9ac2fa;
.phone-button a:active p  text-shadow:0px 0px 5px #000;

.phone-star 
    height:24px;
    width:25px;
    background:url(http://www.busetopizza.com/demo/sendtophone/phone-star.gif) no-repeat;
    position:absolute;
    top:15px;
    left:39px;

.phone-pound 
    height:24px;
    width:25px;
    background:url(http://www.busetopizza.com/demo/sendtophone/phone-pound.gif) no-repeat;
    position:absolute;
    top:15px;
    left:40px;

.phone-enter-number 
    border:none;
    text-align:center;
    font-size:35px;
    font-weight:bold;
    text-shadow:0px 2px 0px #fff;
    font-family:Arial, Helvetica, sans-serif;
    height:73px;
    width:322px;
    background:url(http://www.busetopizza.com/demo/sendtophone/bg-top.gif) repeat-x;    

.choose-carrier-wrapper 
    height:64px;
    position:relative;
    width:322px;
    background:url(http://www.busetopizza.com/demo/sendtophone/bg-choose.gif) repeat-x;    

.choose-carrier 
    width:215px;
    overflow:hidden;

.choose-carrier-selections 
    background:url(http://www.busetopizza.com/demo/sendtophone/phone-carrier.gif) repeat-x;
    border:none;
    color:#FFF;    
    font-family:Arial, Helvetica, sans-serif;
    position:absolute;
    top:0;
    left:0;
    width:230px;
    height:63px;
    padding-top:42px;
    padding-left:27px;
    cursor:pointer;
    -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     font-size:14px;
     font-weight:bold;
     background-color:#000;
     color:#fff;


.choose-styled 


.submit-phone 
    height:64px;
    width:107px;
    background:url(http://www.busetopizza.com/demo/sendtophone/send.gif) repeat-x;
    border:none;
    position:absolute;
    top:0;
    right:0;
    cursor:pointer;

我创建了一个 jfiddle http://jsfiddle.net/muhupower/nkmXe/1/

我已经尝试过很多次随机在线脚本。我能够从链接中获取输入表单的值，但是所有脚本然后将表单替换为我点击的其他值。因此，如果我输入 516，我的最终结果是 6.. 我需要它来继续填充表单。

有什么帮助吗？

【问题讨论】：

花了一点时间试图弄明白......这样的东西是你要找的吗？ jsfiddle.net/dhVgU/1 是的，我的意思是看起来很正确.. 这是正确的做法吗？您使用的不是 HREF，而是数据编号……之前从未使用过这当然是一种方法。理论上，<a> 标签及其href attr 也可以做到这一点。更新了小提琴以显示带有<a>标签的版本：jsfiddle.net/dhVgU/2 谢谢 Andrew.. 我更新了我的 jfiddle jsfiddle.net/muhupower/nkmXe/2，因为你有讨厌的技能 .. 你知道无论如何要在区号周围自动生成 ( ) .. 并且 - 在第 6 个数字之后让它看起来像一个电话号码？ 【参考方案1】：

这是将数字放入输入中的代码：


var i = 0;
        var num = [];
        $(".buttons-wrapper a").click(function(e) 
            e.preventDefault();
            if($(this).attr("href") == "clear") 
                num = [];
                $("#phone").val(num);
                i=0;
            
            else if($(this).attr("href") == "delete") 
                i--;
                var str = $("#phone").val();
                console.log(str);
                if(num.length == 3) 
                    str = str.substring(0, str.length-3).substring(1, str.length);
                
                else if(num.length == 6) 
                    str = str.substring(0, str.length-2);
                
                else 
                    str = str.substring(0, str.length-1);
                
                $("#phone").val(str);
                num.splice(i, 1);
            
            else 
                if(num.length <= 9) 
                    num[i] = $(this).attr("href");
                    if(num.length == 3) 
                        $("#phone").val("("+$("#phone").val()+num[i]+")-");
                    
                    else if(num.length == 6) 
                        $("#phone").val($("#phone").val()+num[i]+"-");

                    
                    else 
                        $("#phone").val($("#phone").val()+num[i]);
                    
                    i++;
                
            
        );

还有一个演示它的小提琴：http://jsfiddle.net/nkmXe/11/

【讨论】：

无论如何给它的最大长度为 10 个数字？表格 maxlength 不再适用于新代码......我不希望人们能够输入更多的数字 @MuhuPower 您只需将其包装在 if 中，只要数组只有 10 个条目，就可以输入数字。更新了代码以反映这一点。谢谢...你有大量的 jquery 信息...你在这里工作有报酬吗？大声笑，我还在开发这个应用程序，一直遇到麻烦.. 快完成了。如果你愿意的话，也许我可以让你更开心。看看我的新小提琴jsfiddle.net/muhupower/nkmXe/7 我希望能够删除和清除表单.. 公元前我禁用了按键并让人们使用模式输入详细信息.. 但如果他们搞砸了，他们就没有办法在不刷新页面的情况下修复号码...有什么帮助吗？ @MuhuPower 这是因为我将选择器改进为button-wrapper a 而不是buttons-wrapper a。在这里修复它：jsfiddle.net/nkmXe/9

以上是关于Jquery 发送到电话单击链接以填充键盘表单中的文本字段的主要内容，如果未能解决你的问题，请参考以下文章

Jquery 脚本在表单填充中阻止键盘输入

如何从 Jquery 对话框表单提交中调用父页面上的回发？

jQuery：使用鼠标单击而非键盘自动填充输入值

使用 Jquery Checkbox 发送的几种表单

我如何以邮件形式发送表单数据并仍然提交

查找链接并将其与表单一起发送到电子邮件