将href更改为电话号码(用户定义)

Question

我正在尝试编写一个脚本，用户可以在其中键入电话号码并将其存储在输入中（在本演示中有效：http://bootsnipp.com/snippets/featured/iphone-number-pad)然后更新href="="tel:"+相同的值。例如，如果用户键入600 999 999，则href将更新为href="tel:[phone]"，然后用户可以单击按钮并拨打电话。

为了弄清楚这件事，我一直在折磨自己。这看起来真的很简单，因为我甚至没有试图使用将电话号码限制为6-7个字符长。

如有任何帮助，我们将不胜感激。

   $(document).ready(function() {
     // Get number
     $('.num').click(function() {
       var num = $(this);
       var text = $.trim(num.find('.txt').clone().children().remove().end().text());
       var telNumber = $('#telNumber');
       $(telNumber).val(telNumber.val() + text);
       $('#call-this').href = "tel:" + $(telNumber).val(telNumber.val() + text)
       console.log(text);
       console.log(telNumber);
     });
     // add number to href
     var call = $(#call - this).attr('target')
       // Other stuff I've tired
       //   $('#call-this').click(
       //   $('#call-this').href="tel:" + $(telNumber).val(telNumber.val() + text)
       //    var call = $('#call-this');
       //    $('#call-this').href=  "tel:" + telNumber;
       //    console.log(call);
       // });
   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="tel" name="name" id="telNumber" class="form-control tel" value="" />
<div class="num">
  <div class="txt">0</div>
</div>
<div class="num">
  <div class="txt">1</div>
</div>
<div class="num">
  <div class="txt">2</div>
</div>
<div class="num">
  <div class="txt">3</div>
</div>
<div class="num">
  <div class="txt">4</div>
</div>
<div class="num">
  <div class="txt">5</div>
</div>
<div class="num">
  <div class="txt">6</div>
</div>
<div class="num">
  <div class="txt">7</div>
</div>
<div class="num">
  <div class="txt">8</div>
</div>
<div class="num">
  <div class="txt">9</div>
</div>
<button class="expand">
  <a href="#" id="call-this" style="color:black;">Call</a>
</button>

Answer 1

您的函数实际上可以简化为这样——原因是，如果.txt元素是.num的唯一子元素，并且它只包含感兴趣的数量，则不需要一直横切到它。

$(document).ready(function () {
    $('.num').click(function () {
        // Append trimmed number to current value
        $(telNumber).val($(telNumber).val() + $(this).text().trim());
        // Update href attribute on #call-this
        $('#call-this').attr('href', 'tel:'+$(telNumber).val());
    });
});

请在此处查看小提琴：http://jsfiddle.net/teddyrised/jwqL4o8w/3

---

事实上，更好的选择是将数字存储在HTML5data-属性中，这样您就可以自由更改.txt元素的innerHTML，而不必担心问题：

<div class="num" data-num="0">
    <div class="txt">0</div>
</div>

那么对于你的JS，只需使用：

$(document).ready(function () {
    $('.num').click(function () {
        // Append trimmed number to current value
        $(telNumber).val($(telNumber).val() + $(this).data('num'));
        // Update href attribute on #call-this
        $('#call-this').attr('href', 'tel:'+$(telNumber).val());
    });
});

Answer 2

我认为在哪里

$('#call-this').href="tel:" + $(telNumber).val(telNumber.val() + text)

应该是

$('#call-this').attr("href", "tel:" + telNumber.val());

编辑我刚刚捕捉到双val()

Answer 3

我认为您需要这个，我已经简化了解决方案。

   $("#telNumber").on("blur", function() {
     $("#call-this").prop("href", "tel:" + $(this).val());
     alert($("#call-this").prop("href"));
   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="tel" name="name" id="telNumber" class="form-control tel" value="" />
<button class="expand">
  <a href="#" id="call-this" style="color:black;">Call</a>
</button>

Answer 4

如果你想链接一个按钮，你的HTML代码应该是这样的：

<input type="tel" name="name" id="telNumber" class="form-control tel" value="" />
<div class="num">
    <div class="txt">0</div>
</div>
<div class="num">
    <div class="txt">1</div>
</div>
<div class="num">
    <div class="txt">2</div>
</div>
<div class="num">
    <div class="txt">3</div>
</div>
<div class="num">
    <div class="txt">4</div>
</div>
<div class="num">
    <div class="txt">5</div>
</div>
<div class="num">
    <div class="txt">6</div>
</div>
<div class="num">
    <div class="txt">7</div>
</div>
<div class="num">
    <div class="txt">8</div>
</div>
<div class="num">
    <div class="txt">9</div>
</div>
<form action="#">
    <input type="submit" value="Call" />
</form>

脚本将是：

$(document).ready(function () {
    $('.txt').on('click', function () {
        $("#telNumber").val($("#telNumber").val() + $(this).text());
        $("form").attr('action', "tel:" + $("#telNumber").val());
    });
});

JSFiddle