[英]Change href to tel: + number (user defined)
我正在尝试编写一个脚本,用户可以在其中键入电话号码并将其存储在输入中(在此演示中有效: http : //bootsnipp.com/snippets/featured/iphone-number-pad ),然后更新href =“” =“ tel:” +相同值。 因此,例如,如果用户键入600 999 999,则href会更新为href =“ tel:600 999 999”,然后用户可以单击按钮进行呼叫。
我一直在努力想办法解决这个问题。 看起来真的很简单,因为我什至没有尝试将电话号码限制为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>
实际上,您的函数可以简化为-原因是,如果.txt
元素是.num
唯一子.num
,并且只包含感兴趣的数字,则实际上不需要完全扩展到.txt
元素。
$(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
实际上,更好的选择是将数字存储在HTML5的data-
属性中,因此您可以自由地更改.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());
});
});
我想你在哪里
$('#call-this').href="tel:" + $(telNumber).val(telNumber.val() + text)
它应该是
$('#call-this').attr("href", "tel:" + telNumber.val());
编辑我刚刚抓住了双val()
我认为您需要这个,我已经简化了解决方案。
$("#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>
如果要链接按钮,则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());
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.