Текстовые сообщения с HTML

Question

Я использовал чистый HTML для составления текстового сообщения SMS, просто добавив специальное значение href, где обычные URL-адреса идут следующим образом:

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

Я создал текстовое поле для ввода номера телефона.

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

Я хочу, чтобы в HTML-коде SMS использовалось значение этого поля, поэтому я попробовал так:

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

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

Но когда я нажимаю для создания SMS, я получаю пустого получателя.Пожалуйста, помогите использовать значение поля в коде SMS!

Answer 1

Вы можете использовать атрибут data-, чтобы установить известную часть href.Затем установите значение href в JavaScript со значением data- и динамической частью:

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

<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')">

Answer 2

Вы можете делать только такие вещи, как "${phone}" в литералах шаблона JS .Этот синтаксис не является частью HTML.Кроме того, он должен будет использовать прослушиватель событий для обновления ссылки всякий раз, когда пользователь обновляет поле ввода, а не только при начальной загрузке страницы.Вы должны сделать что-то вроде этого.

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

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