snipt

Ctrl+h for KB shortcuts

JavaScript

Pretty phone

// <input type="tel" name="phone" maxlength="14" required/>
//
// pretty phone
if ($('input[name=phone]').length > 0)
{
	$('input[name=phone]').on('keyup', function(e){
		var val = $(this).val();
		// clean
		val = val.replace(/[^0-9]/gi, ''); 
		if (val.length > 6)
		{
			$(this).val(val.replace(/(\d{3})(\d{3})(.*)/, '($1) $2-$3'));
			return;
		}
		if (val.length >= 3)
		{
			$(this).val(val.replace(/(\d{3})(\d)/, '($1) $2'));
			return;
		}
		
		$(this).val(val);
	});
}
https://snipt.net/embed/fdec6de2dc3929081d14fc8747d515db/
/raw/fdec6de2dc3929081d14fc8747d515db/
fdec6de2dc3929081d14fc8747d515db
js
JavaScript
23
2019-06-17T05:15:42
True
False
False
/api/public/snipt/143596/
pretty-phone
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1"> 1</a> <a href="#L-2"> 2</a> <a href="#L-3"> 3</a> <a href="#L-4"> 4</a> <a href="#L-5"> 5</a> <a href="#L-6"> 6</a> <a href="#L-7"> 7</a> <a href="#L-8"> 8</a> <a href="#L-9"> 9</a> <a href="#L-10">10</a> <a href="#L-11">11</a> <a href="#L-12">12</a> <a href="#L-13">13</a> <a href="#L-14">14</a> <a href="#L-15">15</a> <a href="#L-16">16</a> <a href="#L-17">17</a> <a href="#L-18">18</a> <a href="#L-19">19</a> <a href="#L-20">20</a> <a href="#L-21">21</a> <a href="#L-22">22</a> <a href="#L-23">23</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="c1">// &lt;input type=&quot;tel&quot; name=&quot;phone&quot; maxlength=&quot;14&quot; required/&gt;</span> </span><span id="L-2"><a name="L-2"></a><span class="c1">//</span> </span><span id="L-3"><a name="L-3"></a><span class="c1">// pretty phone</span> </span><span id="L-4"><a name="L-4"></a><span class="k">if</span> <span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;input[name=phone]&#39;</span><span class="p">).</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span> </span><span id="L-5"><a name="L-5"></a><span class="p">{</span> </span><span id="L-6"><a name="L-6"></a> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;input[name=phone]&#39;</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;keyup&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span> </span><span id="L-7"><a name="L-7"></a> <span class="kd">var</span> <span class="nx">val</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span> </span><span id="L-8"><a name="L-8"></a> <span class="c1">// clean</span> </span><span id="L-9"><a name="L-9"></a> <span class="nx">val</span> <span class="o">=</span> <span class="nx">val</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/[^0-9]/gi</span><span class="p">,</span> <span class="s1">&#39;&#39;</span><span class="p">);</span> </span><span id="L-10"><a name="L-10"></a> <span class="k">if</span> <span class="p">(</span><span class="nx">val</span><span class="p">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">6</span><span class="p">)</span> </span><span id="L-11"><a name="L-11"></a> <span class="p">{</span> </span><span id="L-12"><a name="L-12"></a> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">val</span><span class="p">(</span><span class="nx">val</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/(\d{3})(\d{3})(.*)/</span><span class="p">,</span> <span class="s1">&#39;($1) $2-$3&#39;</span><span class="p">));</span> </span><span id="L-13"><a name="L-13"></a> <span class="k">return</span><span class="p">;</span> </span><span id="L-14"><a name="L-14"></a> <span class="p">}</span> </span><span id="L-15"><a name="L-15"></a> <span class="k">if</span> <span class="p">(</span><span class="nx">val</span><span class="p">.</span><span class="nx">length</span> <span class="o">&gt;=</span> <span class="mi">3</span><span class="p">)</span> </span><span id="L-16"><a name="L-16"></a> <span class="p">{</span> </span><span id="L-17"><a name="L-17"></a> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">val</span><span class="p">(</span><span class="nx">val</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/(\d{3})(\d)/</span><span class="p">,</span> <span class="s1">&#39;($1) $2&#39;</span><span class="p">));</span> </span><span id="L-18"><a name="L-18"></a> <span class="k">return</span><span class="p">;</span> </span><span id="L-19"><a name="L-19"></a> <span class="p">}</span> </span><span id="L-20"><a name="L-20"></a> </span><span id="L-21"><a name="L-21"></a> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">val</span><span class="p">(</span><span class="nx">val</span><span class="p">);</span> </span><span id="L-22"><a name="L-22"></a> <span class="p">});</span> </span><span id="L-23"><a name="L-23"></a><span class="p">}</span> </span></pre></div> </td></tr></table>
jquery, js, phone
1
2
3
4
5
6
7
8
--- 
+++ 
@@ -1,3 +1,5 @@
+// <input type="tel" name="phone" maxlength="14" required/>
+//
 // pretty phone
 if ($('input[name=phone]').length > 0)
 {
--- 
+++ 
@@ -0,0 +1,21 @@
+// pretty phone
+if ($('input[name=phone]').length > 0)
+{
+	$('input[name=phone]').on('keyup', function(e){
+		var val = $(this).val();
+		// clean
+		val = val.replace(/[^0-9]/gi, ''); 
+		if (val.length > 6)
+		{
+			$(this).val(val.replace(/(\d{3})(\d{3})(.*)/, '($1) $2-$3'));
+			return;
+		}
+		if (val.length >= 3)
+		{
+			$(this).val(val.replace(/(\d{3})(\d)/, '($1) $2'));
+			return;
+		}
+		
+		$(this).val(val);
+	});
+}