Переформатирование номера телефона в Laravel с использованием Javascript - PullRequest
0 голосов
/ 31 мая 2019

У меня есть функция, которая форматирует телефонные номера, когда пользователь вводит свой номер телефона. У меня также есть шаблон blade.php, в котором поле номера телефона является частью формы.Как получить шаблон blade-модуля для вызова функции phone () из моего файла main.js?

Contact.blade.php

               <div class="field">
                    <label for="name" class="label">Phone Number</label>
                    <div class="control">
                        <input type="text" id="phonenumber" class="input {{$errors->has('phonenumber') ? 'is-danger' : 'is-success'}}"
                               name="phonenumber" placeholder="Enter phone number" value="{{old('phonenumber')}}">
                    </div>
                </div>

main.js

function telephone(){
    document.getElementById('phonenumber').addEventListener('input', function (e) {
        var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
        e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
    });
}

app.blade.php

<!DOCTYPE html>
<html lang="en">
<head>

 <script type="text/javascript" src="{{URL::asset('js/main.js')}}"></script>
    <link href="{{url('/css/style.css')}}" type="text/css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

@include('inc.contact')
</body>

Ответы [ 2 ]

1 голос
/ 31 мая 2019

Язык на стороне сервера (php) не может вызывать действие в клиентском браузере;есть физическая граница, которая разделяет их.

То, что вы ищете, - это событие в клиентском браузере , которое может вызвать вашу функцию.

main.js

function telephone(e){
    var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
    e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
}
document.getElementById("phonenumber").input = telephone

Вы также должны убедиться, что ваш javascript выполняется после того, как доступно содержимое DOM.

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="{{url('/css/style.css')}}" type="text/css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    @include('inc.contact')
    <script type="text/javascript" src="{{URL::asset('js/main.js')}}"></script>
</body>
1 голос
/ 31 мая 2019

Вы можете использовать onKeyDown или onKeyUp для входного тега phonenumber и указать его для telephone() функции

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...