[英]Laravel 5.6: intl-tel-input compatibility issue with App.js
I have a Laravel 5.6 web page and I want to add IntlTelInput ( https://github.com/jackocnr/intl-tel-input ) but I have try to install it from source, composer and npm (currently using composer and mix to copy build folder) and the 3 of them seem to not initialize the plugin.我有一个 Laravel 5.6 网页,我想添加 IntlTelInput ( https://github.com/jackocnr/intl-tel-input ) 但我尝试从源代码、作曲家和 npm 安装它(目前使用作曲家和混合到复制构建文件夹),其中 3 个似乎没有初始化插件。
<script>$("#phone").intlTelInput();</script>
(After the input in DOM)<script>$("#phone").intlTelInput();</script>
初始化了输入(在 DOM 中输入之后) This is what I got from inspecting the result:这是我从检查结果中得到的:
<div class="intl-tel-input allow-dropdown">
<div class="flag-container">
<div tabindex="0" class="selected-flag">
<div class="iti-flag"></div>
<div class="iti-arrow"></div>
</div>
<ul class="country-list hide">
<li data-dial-code="1" data-country-code="us" class="country preferred">
<div class="flag-box">
<div class="iti-flag us"></div>
</div>
<span class="country-name">United States</span><span class="dial-code">+1</span>
</li>
<li data-dial-code="44" data-country-code="gb" class="country preferred">
<div class="flag-box">
<div class="iti-flag gb"></div>
</div>
<span class="country-name">United Kingdom</span><span class="dial-code">+44</span>
</li>
<li class="divider"></li>
<li data-dial-code="93" data-country-code="af" class="country ">
<div class="flag-box">
<div class="iti-flag af"></div>
</div>
<span class="country-name">Afghanistan (افغانستان)</span><span class="dial-code">+93</span>
</li>
<li data-dial-code="355" data-country-code="al" class="country ">
<div class="flag-box">
<div class="iti-flag al"></div>
</div>
<span class="country-name">Albania (Shqipëri)</span><span class="dial-code">+355</span>
</li>
<li data-dial-code="213" data-country-code="dz" class="country ">
<div class="flag-box">
<div class="iti-flag dz"></div>
</div>
<span class="country-name">Algeria (الجزائر)</span><span class="dial-code">+213</span>
</li>
....
<span class="country-name">Western Sahara (الصحراء الغربية)</span><span class="dial-code">+212</span>
</li>
<li data-dial-code="967" data-country-code="ye" class="country ">
<div class="flag-box">
<div class="iti-flag ye"></div>
</div>
<span class="country-name">Yemen (اليمن)</span><span class="dial-code">+967</span>
</li>
<li data-dial-code="260" data-country-code="zm" class="country ">
<div class="flag-box">
<div class="iti-flag zm"></div>
</div>
<span class="country-name">Zambia</span><span class="dial-code">+260</span>
</li>
<li data-dial-code="263" data-country-code="zw" class="country ">
<div class="flag-box">
<div class="iti-flag zw"></div>
</div>
<span class="country-name">Zimbabwe</span><span class="dial-code">+263</span>
</li>
<li data-dial-code="358" data-country-code="ax" class="country ">
<div class="flag-box">
<div class="iti-flag ax"></div>
</div>
<span class="country-name">Åland Islands</span><span class="dial-code">+358</span>
</li>
</ul>
</div>
<input name="phone" id="phone" placeholder="Phone" value="9992715671" required="required" autocomplete="off" class="form-control" type="text">
</div>
When I manually remove the hide class from ul class="country-list hide" it then appears but I can't interact with it, it appears that the js is not working properly I guess.当我从 ul class="country-list hide" 中手动删除隐藏类时,它会出现,但我无法与之交互,我猜似乎是 js 无法正常工作。
What happens if I remove the "hide":如果我删除“隐藏”会发生什么:
UPDATE:更新:
Doing more testing I realized that if I comment out the " app.js " script intl-tel-input works perfectly so my question is now, what do I have to change in App.js to make this work?做更多的测试我意识到如果我注释掉“ app.js ”脚本 intl-tel-input 可以完美地工作,所以我现在的问题是,我必须在 App.js 中更改什么才能使其工作? (I haven't added nothing to app.js, it is the same one that comes with every laravel installation)
(我没有在 app.js 中添加任何东西,它与每个 Laravel 安装附带的相同)
I had a similar issue after installing via yarn.通过纱线安装后我遇到了类似的问题。 My solution was to add the following:
我的解决方案是添加以下内容:
require('intl-tel-input/build/js/utils'); require("intl-tel-input/build/js/intlTelInput");
To ./resources/assets/js/bootstrap.js
right after require('bootstrap');
./resources/assets/js/bootstrap.js
require('bootstrap');
And then to add:然后添加:
jQuery( '#phone' ).intlTelInput({ dropdownContainer: 'body', autoPlaceholder: 'polite', initialCountry: 'auto', geoIpLookup: function(callback) { jQuery.get("https://ipinfo.io", function() {}, "jsonp").always(function(resp) { var countryCode = (resp && resp.country) ? resp.country : ""; callback(countryCode); }); }, });
to the end of the file ./resources/assets/js/app.js
到文件的
./resources/assets/js/app.js
Note I added some arguments to mine, since I was also having issues with the automatic country detection until I sorted this out.注意我添加了一些参数,因为在我解决这个问题之前我也遇到了自动国家检测的问题。
I tried removing the defer attribute but got this error:我尝试删除 defer 属性,但收到此错误:
[Vue warn]: Cannot find element: #app
Try moving your app.js
import after the body tag.尝试在 body 标签之后移动
app.js
导入。 This will solve the issue.这将解决问题。
<body>...</body>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.