Merhaba,

phonemask.min.js

<script>
const phoneMask=function(){const t=this;let e=["0","1","2","3","4","5","6","7","8","9"],o=[];function n(t){let e=!1;const n=Object.keys(o),s=n.length;for(let i=0;i<s;i+=1){t===o[n[i]]&&(e=!0)}return e}function s(e,o){try{let n=t.getCursorPosition(e);if("_"!==o.substring(n,n+1)){let s=t.searchPosition(e,o,1);n!==s&&t.setCursorPosition(e,s)}}catch(t){console.log(t)}}function i(e,o,n){let s=o.getAttribute("value"),i=s.split(""),r=(e.clipboardData||window.clipboardData).getData("text"),l=r.replace(/\D/g,"");if(""===l)return;let c=r.length,a=n.length,u=t.getCursorPosition(o),h=n.split(""),f=l.split(""),g=0;for(let t=u;t<a;t+=1){let e=h[t],o=f[g];if("_"===e&&""!==o&&(i[t]=f[g],(g+=1)>=c)){u=t+1;break}}s=i.join(""),o.setAttribute("value",s),o.value=s,t.setCursorPosition(o,u)}function r(o,n,s){const i=s.length;let r=t.getCursorPosition(n),l=r;const c=o.key;let a=n.getAttribute("value");if(e.includes(c)){if(r<i&&r!==(l=t.searchPosition(n,s,1))){const t=a.split("");Math.abs(r-l)>1?(t[l]=c,l+=1):t[r]=c,a=t.join(""),n.setAttribute("value",a),n.value=a}}else if(8===o.keyCode||46===o.keyCode){let e=1;if(8===o.keyCode&&(e=-1),l=t.searchPosition(n,s,e),1===Math.abs(r-l)){const t=a.split("");-1===e?t[l]="_":t[r]="_",a=t.join(""),n.setAttribute("value",a),n.value=a}}else 37===o.keyCode?l=t.searchPosition(n,s,-1):39===o.keyCode&&(l=t.searchPosition(n,s,1));r!==l&&t.setCursorPosition(n,l)}this.getCursorPosition=function(t){let e=0;try{if(document.selection){t.focus();const o=document.selection.createRange();o.moveStart("character",-ctrl.value.length),e=o.text.length}else(t.selectionStart||"0"===t.selectionStart)&&(e=t.selectionStart)}catch(t){console.log(t)}return e},this.setCursorPosition=function(t,e){try{document.createRange?t.setSelectionRange(e,e):document.createTextRange&&(t.focus(),t.collapse(!1),t.select())}catch(t){console.log(t)}},this.searchPosition=function(e,o,n=1){let s=t.getCursorPosition(e),i=o.split(""),r=i.length,l=s,c=!0;for(;l>=0&&l<=r;){if("_"===i[Math.min(l,l+n)]){s=c?l+n:l;break}l+=n,c=!1}return s},this.init=function(e){const l=document.querySelectorAll(e),c=Object.keys(l),a=c.length;for(let t=0;t<a;t+=1){const e=l[c[t]];try{if(!n(e)){const t=e.getAttribute("mask");e.value=t,o.push(e),e.addEventListener("paste",o=>{i(o,e,t),o.preventDefault()}),e.addEventListener("focus",()=>(s(e,t),!0)),e.addEventListener("click",()=>(s(e,t),!0)),e.addEventListener("keydown",o=>"v"===o.key||(r(o,e,t),o.preventDefault(),!1))}}catch(t){console.log(t)}}return t}};
</script>

Yukarıdaki JS kodunu bir JS dosyası olarak kaydedin ve hangi sayfada kullanacaksanız inputmaskı o sayfadan çağırın.

<input class="form-control" type="text" name="phone" id="phone" placeholder="Phone" required="">

<!-- Yukarıda temanın varsayılanında olan input alanınından placeholder bölünümü silin ve sonuna value="0(5__) ___ - ____" mask="0(5__) ___ - ____" placeholder="0(5__) ___ - ____" tanımlamalarını ekleyin. -->

<input class="form-control" type="text" name="phone" id="phone" required="" value="0(5__) ___ - ____" mask="0(5__) ___ - ____" placeholder="0(5__) ___ - ____">

Input alanının altına ise aşağıdaki JS kodunu yazın.

<script type="text/javascript">
    const cssPhone = 'input[name="phone"';
    (new phoneMask()).init(cssPhone);
</script>

Örnek kullanım:

<script type="application/javascript" src="/phonemask.min.js"></script>
<input class="form-control" type="text" name="phone" id="phone" required="" value="0(5__) ___ - ____" mask="0(5__) ___ - ____" placeholder="0(5__) ___ - ____">
<script type="text/javascript">
    const cssPhone = 'input[name="phone"';
    (new phoneMask()).init(cssPhone);
</script>