Текстовые сообщения с HTML
Я использовал чистый 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-коде!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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>
Там я отредактировал свой ответ, чтобы код запускался всякий раз, когда поле ввода обновляется.
Я попробовал ваше предложение, но не сработало. Вот код: jsfiddle.net/Hnacer/j1x9w8Lu/6
К сожалению, я забыл не использовать объект jQuery для элемента input в прослушивателе событий. Я отредактировал его снова, и теперь он должен работать; Я только что это проверил.
Извините, но код не редактируется. Если возможно, вы можете поместить его в jsfiddle? Спасибо
Вы можете использовать атрибут 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')">
Спасибо, но это не сработало. Когда я нажимаю на ссылку, ничего не происходит!