Question

我使用纯HTML编写短信短信，只需添加一个特殊的href值，通常常规网址如下所示：

<a href="sms:+33xxxxxxxx?body=Hello!">
    Compose SMS!
</a>

我创建了一个文本字段来输入电话号码。

<input type="text" id="numPhone" style="width: 203px;">

我希望SMS HTML代码使用此字段的值，所以我尝试这样：

<script type="text/javascript"> 
    var phone = $('#numPhone').val();
</script>

<a href="sms:${phone}?body=Hello!">
    Compose SMS!
</a>

但是当我点击撰写短信时，我会得到一个空的收件人。请帮助使用短信代码中的字段值！

Answer 1

你只能做＆＃34; ${phone}＆＃34;在JS template literals。该语法不是HTML的一部分。此外，只要用户更新输入字段，就必须使用event listener来更新链接，而不仅仅是在页面最初加载时。你必须做这样的事情。

<a id="composeSMS">
    Compose SMS!
</a>

<script type="text/javascript">
    $('#numPhone').on('input', function() {
        $('#composeSMS').attr('href', 'sms:' + this.value + '?body=Hello!');
    });
</script>

Answer 2

您可以使用data-属性设置href的已知部分。然后在JavaScript中设置href的值，其值为data-和动态部分：

＆＃13;

function updateLink(input){
  var phone = $(input).val();
  $('#compose').attr('href', $('#compose').attr('data-href1') + phone + $('#compose').attr('data-href2'));
}
updateLink('#numPhone');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="compose" href="" data-href1="sms:" data-href2="?body=Hello!">
    Compose SMS!
</a>
<input type="text" id="numPhone" style="width: 203px;" value="+33xxxxxxxx" oninput="updateLink('#numPhone')">

＆＃13;

带有HTML的文本消息

2 个答案: