我正在尝试编写一个脚本,用户可以在其中键入电话号码并将其存储在输入中(在此演示中有效: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>
答案 0 :(得分:3)
你的功能实际上可以简化为这个 - 原因是你不需要实际横向.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
事实上,更好的选择是将数字存储在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());
});
});
答案 1 :(得分:1)
我想你在哪里
$('#call-this').href="tel:" + $(telNumber).val(telNumber.val() + text)
应该是
$('#call-this').attr("href", "tel:" + telNumber.val());
编辑我刚抓到了双val()
答案 2 :(得分:0)
我认为你需要这个,我简化了解决方案。
$("#telNumber").on("blur", function() {
$("#call-this").prop("href", "tel:" + $(this).val());
alert($("#call-this").prop("href"));
});
&#13;
<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>
&#13;
答案 3 :(得分:0)
如果要链接按钮,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());
});
});