{"id":1355,"date":"2010-08-30T09:30:29","date_gmt":"2010-08-30T11:30:29","guid":{"rendered":"https:\/\/www.kadunew.com\/blog\/?p=1355"},"modified":"2011-03-11T20:51:44","modified_gmt":"2011-03-11T22:51:44","slug":"criando-mascara-de-entrada-em-formularios-com-masked-input","status":"publish","type":"post","link":"https:\/\/www.kadunew.com\/blog\/jquery\/criando-mascara-de-entrada-em-formularios-com-masked-input","title":{"rendered":"Criando m\u00e1scara de entrada em formul\u00e1rios com Masked Input e jQuery"},"content":{"rendered":"<p>Este plugin que funciona em conjunto com a <a href=\"https:\/\/www.kadunew.com\/blog\/category\/jquery\">biblioteca jQuery<\/a> permite a aplica\u00e7\u00e3o de uma <strong>m\u00e1scara de entrada para campos de formul\u00e1rio<\/strong> do tipo input, esta t\u00e9cnica fornece uma solu\u00e7\u00e3o elegante para introduzir dados em campos de texto, como data, CPF, n\u00famero de telefone, etc.<\/p>\n<p>A m\u00e1scara torna a entrada de dados mais f\u00e1cil e ainda serve para controlar os valores que os usu\u00e1rios podem inserir em um campo de texto, evitando que o usu\u00e1rio digite texto onde o correto seria n\u00famero.<br \/>\n<!--more Continuar lendo...--><\/p>\n<p>Primeiro voc\u00ea deve incluir a chamada para a biblioteca jQuery.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;script src=&quot;http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.3\/jquery.min.js&quot; type=&quot;text\/javascript&quot;&gt;&lt;\/script&gt;\r\n<\/pre>\n<p>Depois inclua a chamada do <strong>plugin Masked Input<\/strong>. Perceba que o nome <em>jquery.maskedinput<\/em> \u00e9 o nome do arquivo do plugin e <em>js<\/em> a extens\u00e3o que indica ser um arquivo JavaScript.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;script src=&quot;jquery.maskedinput.js&quot; type=&quot;text\/javascript&quot;&gt;&lt;\/script&gt;\r\n<\/pre>\n<h2>Caracteres chaves para criar as m\u00e1scaras<\/h2>\n<div class=\"obs\">\na &#8211; Representa um car\u00e1cter alfa (AZ , az)<br \/>\n9 &#8211; Representa um car\u00e1cter num\u00e9rico (0-9)<br \/>\n* &#8211; Representa um car\u00e1cter alfanum\u00e9rico (AZ , az ,0 -9)\n<\/div>\n<h2>Evitando conflito com outras biliotecas<\/h2>\n<p>Uma das raz\u00f5es que tornam a biblioteca jQuery uma das mais populares \u00e9 a capacidade de adi\u00e7\u00e3o de plugins. O problema \u00e9 que todos eles usam <code>$<\/code> como nome principal para chamar suas funcionalidades podendo, ocasionar algum tipo de conflito.<\/p>\n<p>Para resolver esses problema utilizamos a fun\u00e7\u00e3o <code>jQuery.noConflict()<\/code>.<\/p>\n<h2>Usando o plugin Masked Input<\/h2>\n<p>Depois de tudo pronto chamamos a fun\u00e7\u00e3o de m\u00e1scara para os itens que voc\u00ea deseja. No exemplo utilizamos <strong>#data<\/strong>, <strong>#telefone<\/strong>, <strong>#cpf<\/strong>, <strong>#cep<\/strong>, <strong>#cnpj<\/strong> e <strong>#placa<\/strong> que s\u00e3o respectivamente os id&#8217;s dos campos a serem mascarados<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;script type=&quot;text\/javascript&quot;&gt; \r\njQuery.noConflict();\r\njQuery(function($){\r\n   $(&quot;#data&quot;).mask(&quot;99\/99\/9999&quot;);\r\n   $(&quot;#telefone&quot;).mask(&quot;(099) 9999-9999&quot;);\r\n   $(&quot;#cpf&quot;).mask(&quot;999.999.999-99&quot;);\r\n   $(&quot;#cep&quot;).mask(&quot;99999-999&quot;); \r\n   $(&quot;#cnpj&quot;).mask(&quot;99.999.999\/9999-99&quot;);\r\n   $(&quot;#placa&quot;).mask(&quot;aaa - 9999&quot;); \r\n});\r\n&lt;\/script&gt; \r\n<\/pre>\n<p>Se voc\u00ea n\u00e3o estiver satisfeito com o caractere underscore (&#8216;_&#8217;) como um espa\u00e7o reservado, voc\u00ea pode passar um argumento opcional para o m\u00e9todo  <code>maskedinput<\/code>.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\njQuery(function($){\r\n   $(&quot;#product&quot;).mask(&quot;99\/99\/9999&quot;,{placeholder:&quot; &quot;});\r\n});\r\n<\/pre>\n<p>Veja nessa <a href=\"https:\/\/www.kadunew.com\/blog\/exemplo-mascara-masked-input.html\">p\u00e1gina de demonstra\u00e7\u00e3o<\/a> o plugin funcionando.<\/p>\n<p>Abaixo um v\u00eddeo do plugin Masked Input<\/p>\n<p><object width=\"640\" height=\"385\"><param name=\"movie\" value=\"http:\/\/www.youtube.com\/v\/BMaTiGKykl8?fs=1&amp;hl=pt_BR\"><\/param><param name=\"allowFullScreen\" value=\"true\"><\/param><param name=\"allowscriptaccess\" value=\"always\"><\/param><embed src=\"http:\/\/www.youtube.com\/v\/BMaTiGKykl8?fs=1&amp;hl=pt_BR\" type=\"application\/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"510\" height=\"300\"><\/embed><\/object><\/p>\n<div class=\"obs\">\nPara <a href=\"http:\/\/digitalbush.com\/projects\/masked-input-plugin\/\" rel=\"nofollow\">baixar o plugin Masked Input<\/a> e saber mais sobre o plugin acesse a p\u00e1gina do plugin.\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Este plugin que funciona em conjunto com a biblioteca jQuery permite a aplica\u00e7\u00e3o de uma m\u00e1scara de entrada para campos de formul\u00e1rio do tipo input, esta t\u00e9cnica fornece uma solu\u00e7\u00e3o elegante para introduzir dados em campos de texto, como data, CPF, n\u00famero de telefone, etc. A m\u00e1scara torna a entrada de dados mais f\u00e1cil e [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[46],"class_list":["post-1355","post","type-post","status-publish","format-standard","hentry","category-jquery","tag-jquery"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Criando m\u00e1scara de entrada em formul\u00e1rios com Masked Input e jQuery<\/title>\n<meta name=\"description\" content=\"Aprenda como instalar e usar o plugin Masked Input. Com ele voc\u00ea cria m\u00e1scaras de entrada para seus formul\u00e1rios de uma forma muito simples e r\u00e1pida.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.kadunew.com\/blog\/jquery\/criando-mascara-de-entrada-em-formularios-com-masked-input\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Criando m\u00e1scara de entrada em formul\u00e1rios com Masked Input e jQuery\" \/>\n<meta property=\"og:description\" content=\"Aprenda como instalar e usar o plugin Masked Input. Com ele voc\u00ea cria m\u00e1scaras de entrada para seus formul\u00e1rios de uma forma muito simples e r\u00e1pida.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kadunew.com\/blog\/jquery\/criando-mascara-de-entrada-em-formularios-com-masked-input\" \/>\n<meta property=\"og:site_name\" content=\"KADUNEW\" \/>\n<meta property=\"article:published_time\" content=\"2010-08-30T11:30:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2011-03-11T22:51:44+00:00\" \/>\n<meta name=\"author\" content=\"Kadu Oliveira\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kadu Oliveira\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/jquery\/criando-mascara-de-entrada-em-formularios-com-masked-input\",\"url\":\"https:\/\/www.kadunew.com\/blog\/jquery\/criando-mascara-de-entrada-em-formularios-com-masked-input\",\"name\":\"Criando m\u00e1scara de entrada em formul\u00e1rios com Masked Input e jQuery\",\"isPartOf\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\"},\"datePublished\":\"2010-08-30T11:30:29+00:00\",\"dateModified\":\"2011-03-11T22:51:44+00:00\",\"author\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\"},\"description\":\"Aprenda como instalar e usar o plugin Masked Input. Com ele voc\u00ea cria m\u00e1scaras de entrada para seus formul\u00e1rios de uma forma muito simples e r\u00e1pida.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/jquery\/criando-mascara-de-entrada-em-formularios-com-masked-input#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.kadunew.com\/blog\/jquery\/criando-mascara-de-entrada-em-formularios-com-masked-input\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/jquery\/criando-mascara-de-entrada-em-formularios-com-masked-input#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.kadunew.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JS\/jQuery\",\"item\":\"https:\/\/www.kadunew.com\/blog\/category\/jquery\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Criando m\u00e1scara de entrada em formul\u00e1rios com Masked Input e jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\",\"url\":\"https:\/\/www.kadunew.com\/blog\/\",\"name\":\"KADUNEW\",\"description\":\"Artigos sobre Front-End e Programa\u00e7\u00e3o web\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\",\"name\":\"Kadu Oliveira\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"caption\":\"Kadu Oliveira\"},\"sameAs\":[\"https:\/\/www.kadunew.com\/blog\"],\"url\":\"https:\/\/www.kadunew.com\/blog\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Criando m\u00e1scara de entrada em formul\u00e1rios com Masked Input e jQuery","description":"Aprenda como instalar e usar o plugin Masked Input. Com ele voc\u00ea cria m\u00e1scaras de entrada para seus formul\u00e1rios de uma forma muito simples e r\u00e1pida.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.kadunew.com\/blog\/jquery\/criando-mascara-de-entrada-em-formularios-com-masked-input","og_locale":"pt_BR","og_type":"article","og_title":"Criando m\u00e1scara de entrada em formul\u00e1rios com Masked Input e jQuery","og_description":"Aprenda como instalar e usar o plugin Masked Input. Com ele voc\u00ea cria m\u00e1scaras de entrada para seus formul\u00e1rios de uma forma muito simples e r\u00e1pida.","og_url":"https:\/\/www.kadunew.com\/blog\/jquery\/criando-mascara-de-entrada-em-formularios-com-masked-input","og_site_name":"KADUNEW","article_published_time":"2010-08-30T11:30:29+00:00","article_modified_time":"2011-03-11T22:51:44+00:00","author":"Kadu Oliveira","twitter_misc":{"Escrito por":"Kadu Oliveira","Est. tempo de leitura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.kadunew.com\/blog\/jquery\/criando-mascara-de-entrada-em-formularios-com-masked-input","url":"https:\/\/www.kadunew.com\/blog\/jquery\/criando-mascara-de-entrada-em-formularios-com-masked-input","name":"Criando m\u00e1scara de entrada em formul\u00e1rios com Masked Input e jQuery","isPartOf":{"@id":"https:\/\/www.kadunew.com\/blog\/#website"},"datePublished":"2010-08-30T11:30:29+00:00","dateModified":"2011-03-11T22:51:44+00:00","author":{"@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05"},"description":"Aprenda como instalar e usar o plugin Masked Input. Com ele voc\u00ea cria m\u00e1scaras de entrada para seus formul\u00e1rios de uma forma muito simples e r\u00e1pida.","breadcrumb":{"@id":"https:\/\/www.kadunew.com\/blog\/jquery\/criando-mascara-de-entrada-em-formularios-com-masked-input#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kadunew.com\/blog\/jquery\/criando-mascara-de-entrada-em-formularios-com-masked-input"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.kadunew.com\/blog\/jquery\/criando-mascara-de-entrada-em-formularios-com-masked-input#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kadunew.com\/blog"},{"@type":"ListItem","position":2,"name":"JS\/jQuery","item":"https:\/\/www.kadunew.com\/blog\/category\/jquery"},{"@type":"ListItem","position":3,"name":"Criando m\u00e1scara de entrada em formul\u00e1rios com Masked Input e jQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.kadunew.com\/blog\/#website","url":"https:\/\/www.kadunew.com\/blog\/","name":"KADUNEW","description":"Artigos sobre Front-End e Programa\u00e7\u00e3o web","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05","name":"Kadu Oliveira","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","caption":"Kadu Oliveira"},"sameAs":["https:\/\/www.kadunew.com\/blog"],"url":"https:\/\/www.kadunew.com\/blog\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/1355"}],"collection":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/comments?post=1355"}],"version-history":[{"count":17,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/1355\/revisions"}],"predecessor-version":[{"id":2115,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/1355\/revisions\/2115"}],"wp:attachment":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/media?parent=1355"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/categories?post=1355"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/tags?post=1355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}