{"id":14882,"date":"2023-12-11T18:54:29","date_gmt":"2023-12-11T21:54:29","guid":{"rendered":"https:\/\/categoriaoutros.com.br\/?p=14882"},"modified":"2023-12-11T18:54:56","modified_gmt":"2023-12-11T21:54:56","slug":"criar-campos-para-dinheiro-em-html","status":"publish","type":"post","link":"https:\/\/categoriaoutros.com.br\/?p=14882","title":{"rendered":"Criar Campos para Dinheiro em HTML?"},"content":{"rendered":"\n

Aprenda a criar campos para dinheiro em HTML para permitir que os usu\u00e1rios insiram valores monet\u00e1rios de forma correta e padronizada nos formul\u00e1rios do site.<\/p>\n\n\n\n

Aqui, chamo de campo de dinheiro<\/strong> aos compos input dum formul\u00e1rio onde os usu\u00e1rios podem inserir valores em reais. Mas, h\u00e1 diversos outros nomes para isso. Al\u00e9m de “campo de dinheiro”, outros termos comuns usados s\u00e3o “campo de moeda” ou “campo de valor monet\u00e1rio”.<\/p>\n\n\n\n

No post Criar Campo que S\u00f3 Aceite N\u00famero em HTML<\/a> aprendemos a criar um campo <input type=”number”><\/strong> onde s\u00f3 aceite n\u00fameros como entrada. Se o usu\u00e1rio tentar digitar vogais ou consoantes n\u00e3o ter\u00e1 sucesso. Muitos poderiam usar esse campo para inserir valores de dinheiro, mas, pessoalmente, acho muito melhor usar um plugin JQuery para realizar essa fun\u00e7\u00e3o.<\/p>\n\n\n\n

Usando JQuery para criar campos de dinheiro <\/h2>\n\n\n\n

Dentro da tag <head> insira as linhas para nosso frameqork JQuery e do nosso plugin chamado maskMoney. Sim, usaremos um plugin para criar m\u00e1scaras.<\/p>\n\n\n\n

\n\n<<\/font>script<\/font> <\/font>src<\/font>=<\/font>"\/\/code.jquery.com\/jquery.js"<\/font>><\/<\/font>script<\/font>><\/font>\n<<\/font>script<\/font> <\/font>src<\/font>=<\/font>"https:\/\/igorescobar.github.io\/jQuery-Mask-Plugin\/js\/jquery.mask.min.js"<\/font>><\/<\/font>script<\/font>><\/font>\n\n<\/pre>\n\n\n\n
Chame a m\u00e1scara. Coloque o trecho abaixo em alguma parte do seu c\u00f3digo. Irei inserir antes da tag <\/head><\/p>\n\n\n\n
<<\/font>script<\/font>><\/font>\n$<\/font>('.dinheiro'<\/font>).mask<\/font>('#.##0,00'<\/font>, <\/font>{<\/font>reverse: <\/font>true<\/font>}<\/font>);<\/font>\n<\/<\/font>script<\/font>><\/font><\/pre>\n\n\n\n
<\/p>\n\n\n\n
Agora, crie o campo onde inseriremos valores em real (dinheiro). Crie uma classe, aqui, chamei ela de class=”dinheiro”<\/strong><\/p>\n\n\n\n
<<\/font>form<\/font>><\/font>\n<<\/font>label<\/font> <\/font>for<\/font>=<\/font>"valor"<\/font>><\/font>Valor:<\/<\/font>label<\/font>><\/font>\n<<\/font>input<\/font> <\/font>type<\/font>=<\/font>"text"<\/font> <\/font>name<\/font>=<\/font>"valor"<\/font> <\/font>class<\/font>=<\/font>"dinheiro form-control"<\/font>  ><\/font>\n<<\/font>input<\/font> <\/font>type<\/font>=<\/font>"submit"<\/font> <\/font>name<\/font>=<\/font>"enviar"<\/font> <\/font>value<\/font>=<\/font>"Enviar"<\/font>><\/font>\n<\/<\/font>form<\/font>><\/font><\/pre>\n\n\n\n
C\u00f3digo completo<\/h2>\n\n\n\n
<!DOCTYPE html><\/font>\n<<\/font>html<\/font> <\/font>lang<\/font>=<\/font>"pt-BR"<\/font>><\/font>\n<<\/font>head<\/font>><\/font>\n  <\/font><<\/font>meta<\/font> <\/font>charset<\/font>=<\/font>"UTF-8"<\/font>><\/font>\n  <\/font><<\/font>meta<\/font> <\/font>name<\/font>=<\/font>"viewport"<\/font> <\/font>content<\/font>=<\/font>"width=device-width, initial-scale=1.0"<\/font>><\/font>\n  <\/font><<\/font>title<\/font>><\/font>Exemplo<\/font><\/<\/font>title<\/font>><\/font>\n\n  <\/font><<\/font>script<\/font> <\/font>src<\/font>=<\/font>"\/\/code.jquery.com\/jquery.js"<\/font>><\/<\/font>script<\/font>><\/font>\n  <\/font><<\/font>script<\/font> <\/font>src<\/font>=<\/font>"https:\/\/igorescobar.github.io\/jQuery-Mask-Plugin\/js\/jquery.mask.min.js"<\/font>><\/<\/font>script<\/font>><\/font>\n\n  <\/font><<\/font>script<\/font>><\/font>\n    $<\/font>('.dinheiro'<\/font>).mask<\/font>('#.##0,00'<\/font>, <\/font>{<\/font>reverse: <\/font>true<\/font>}<\/font>);<\/font>\n  <\/font><\/<\/font>script<\/font>><\/font>\n<\/<\/font>head<\/font>><\/font>\n\n<<\/font>body<\/font>><\/font>\n  <<\/font>form<\/font>><\/font>\n    <<\/font>label<\/font> <\/font>for<\/font>=<\/font>"valor"<\/font>><\/font>Valor:<\/<\/font>label<\/font>><\/font>\n    <<\/font>input<\/font> <\/font>type<\/font>=<\/font>"text"<\/font> <\/font>name<\/font>=<\/font>"valor"<\/font> <\/font>class<\/font>=<\/font>"dinheiro form-control"<\/font>><\/font>\n    <<\/font>input<\/font> <\/font>type<\/font>=<\/font>"submit"<\/font> <\/font>name<\/font>=<\/font>"enviar"<\/font> <\/font>value<\/font>=<\/font>"Enviar"<\/font>><\/font>\n  <\/<\/font>form<\/font>><\/font>\n<\/<\/font>body<\/font>><\/font>\n\n<\/<\/font>html<\/font>><\/font><\/pre>\n\n\n\n
<\/p>\n\n\n\n
Fonte: github<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Aprenda a criar campos para dinheiro em HTML para permitir que os usu\u00e1rios insiram valores monet\u00e1rios de forma correta e padronizada nos formul\u00e1rios do site. Aqui, chamo de campo de dinheiro aos compos input dum formul\u00e1rio onde os usu\u00e1rios podem inserir valores em reais. Mas, h\u00e1 diversos outros nomes para isso. Al\u00e9m de “campo de…<\/p>\n
Read More “Criar Campos para Dinheiro em HTML?”<\/span> »<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[669,16,4477],"tags":[670],"class_list":["post-14882","post","type-post","status-publish","format-standard","hentry","category-html","category-informatica-dicas","category-programacao-desenvolvimento","tag-html"],"yoast_head":"\nCriar Campos para Dinheiro em HTML? - Categoria Outros<\/title>\n<meta name=\"description\" content=\"Aprenda a criar campos para dinheiro em HTML para permitir que os usu\u00e1rios insiram valores monet\u00e1rios de forma correta e padronizada nos formul\u00e1rios do site.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/categoriaoutros.com.br\/?p=14882\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Criar Campos para Dinheiro em HTML? - Categoria Outros\" \/>\n<meta property=\"og:description\" content=\"Aprenda a criar campos para dinheiro em HTML para permitir que os usu\u00e1rios insiram valores monet\u00e1rios de forma correta e padronizada nos formul\u00e1rios do site.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/categoriaoutros.com.br\/?p=14882\" \/>\n<meta property=\"og:site_name\" content=\"Categoria Outros\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/categoriaoutros\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-11T21:54:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-11T21:54:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/pinguim-paginas-padrao.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1022\" \/>\n\t<meta property=\"og:image:height\" content=\"722\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Categoria: Outros\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CategoriaOutros\" \/>\n<meta name=\"twitter:site\" content=\"@CategoriaOutros\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Categoria: Outros\" \/>\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\":\"Article\",\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=14882#article\",\"isPartOf\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=14882\"},\"author\":{\"name\":\"Categoria: Outros\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/ba0f432708449436912bd6736864bb40\"},\"headline\":\"Criar Campos para Dinheiro em HTML?\",\"datePublished\":\"2023-12-11T21:54:29+00:00\",\"dateModified\":\"2023-12-11T21:54:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=14882\"},\"wordCount\":226,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/#organization\"},\"keywords\":[\"html\"],\"articleSection\":[\"html\",\"Inform\u00e1tica\",\"Programa\u00e7\u00e3o\/desenvolvimento\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/categoriaoutros.com.br\/?p=14882#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=14882\",\"url\":\"https:\/\/categoriaoutros.com.br\/?p=14882\",\"name\":\"Criar Campos para Dinheiro em HTML? - Categoria Outros\",\"isPartOf\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/#website\"},\"datePublished\":\"2023-12-11T21:54:29+00:00\",\"dateModified\":\"2023-12-11T21:54:56+00:00\",\"description\":\"Aprenda a criar campos para dinheiro em HTML para permitir que os usu\u00e1rios insiram valores monet\u00e1rios de forma correta e padronizada nos formul\u00e1rios do site.\",\"breadcrumb\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=14882#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/categoriaoutros.com.br\/?p=14882\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=14882#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/categoriaoutros.com.br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Criar Campos para Dinheiro em HTML?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#website\",\"url\":\"https:\/\/categoriaoutros.com.br\/\",\"name\":\"Categoria Outros\",\"description\":\"Assuntos Diversos\",\"publisher\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/categoriaoutros.com.br\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#organization\",\"name\":\"Categoria Outros\",\"alternateName\":\"Categoria Outros\",\"url\":\"https:\/\/categoriaoutros.com.br\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/categoriaoutros-logo.jpg\",\"contentUrl\":\"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/categoriaoutros-logo.jpg\",\"width\":400,\"height\":400,\"caption\":\"Categoria Outros\"},\"image\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/categoriaoutros\",\"https:\/\/twitter.com\/CategoriaOutros\",\"https:\/\/br.pinterest.com\/CategoriaOutros\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/ba0f432708449436912bd6736864bb40\",\"name\":\"Categoria: Outros\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ed97775f0ab50750ed638ed3417ea85e19ced2c648da167a108e393ae5fd9e33?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ed97775f0ab50750ed638ed3417ea85e19ced2c648da167a108e393ae5fd9e33?s=96&d=mm&r=g\",\"caption\":\"Categoria: Outros\"},\"sameAs\":[\"http:\/\/categoriaoutros.com.br\"],\"url\":\"https:\/\/categoriaoutros.com.br\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Criar Campos para Dinheiro em HTML? - Categoria Outros","description":"Aprenda a criar campos para dinheiro em HTML para permitir que os usu\u00e1rios insiram valores monet\u00e1rios de forma correta e padronizada nos formul\u00e1rios do site.","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:\/\/categoriaoutros.com.br\/?p=14882","og_locale":"pt_BR","og_type":"article","og_title":"Criar Campos para Dinheiro em HTML? - Categoria Outros","og_description":"Aprenda a criar campos para dinheiro em HTML para permitir que os usu\u00e1rios insiram valores monet\u00e1rios de forma correta e padronizada nos formul\u00e1rios do site.","og_url":"https:\/\/categoriaoutros.com.br\/?p=14882","og_site_name":"Categoria Outros","article_publisher":"https:\/\/www.facebook.com\/categoriaoutros","article_published_time":"2023-12-11T21:54:29+00:00","article_modified_time":"2023-12-11T21:54:56+00:00","og_image":[{"width":1022,"height":722,"url":"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/pinguim-paginas-padrao.webp","type":"image\/webp"}],"author":"Categoria: Outros","twitter_card":"summary_large_image","twitter_creator":"@CategoriaOutros","twitter_site":"@CategoriaOutros","twitter_misc":{"Escrito por":"Categoria: Outros","Est. tempo de leitura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/categoriaoutros.com.br\/?p=14882#article","isPartOf":{"@id":"https:\/\/categoriaoutros.com.br\/?p=14882"},"author":{"name":"Categoria: Outros","@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/ba0f432708449436912bd6736864bb40"},"headline":"Criar Campos para Dinheiro em HTML?","datePublished":"2023-12-11T21:54:29+00:00","dateModified":"2023-12-11T21:54:56+00:00","mainEntityOfPage":{"@id":"https:\/\/categoriaoutros.com.br\/?p=14882"},"wordCount":226,"commentCount":0,"publisher":{"@id":"https:\/\/categoriaoutros.com.br\/#organization"},"keywords":["html"],"articleSection":["html","Inform\u00e1tica","Programa\u00e7\u00e3o\/desenvolvimento"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/categoriaoutros.com.br\/?p=14882#respond"]}]},{"@type":"WebPage","@id":"https:\/\/categoriaoutros.com.br\/?p=14882","url":"https:\/\/categoriaoutros.com.br\/?p=14882","name":"Criar Campos para Dinheiro em HTML? - Categoria Outros","isPartOf":{"@id":"https:\/\/categoriaoutros.com.br\/#website"},"datePublished":"2023-12-11T21:54:29+00:00","dateModified":"2023-12-11T21:54:56+00:00","description":"Aprenda a criar campos para dinheiro em HTML para permitir que os usu\u00e1rios insiram valores monet\u00e1rios de forma correta e padronizada nos formul\u00e1rios do site.","breadcrumb":{"@id":"https:\/\/categoriaoutros.com.br\/?p=14882#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/categoriaoutros.com.br\/?p=14882"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/categoriaoutros.com.br\/?p=14882#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/categoriaoutros.com.br\/"},{"@type":"ListItem","position":2,"name":"Criar Campos para Dinheiro em HTML?"}]},{"@type":"WebSite","@id":"https:\/\/categoriaoutros.com.br\/#website","url":"https:\/\/categoriaoutros.com.br\/","name":"Categoria Outros","description":"Assuntos Diversos","publisher":{"@id":"https:\/\/categoriaoutros.com.br\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/categoriaoutros.com.br\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/categoriaoutros.com.br\/#organization","name":"Categoria Outros","alternateName":"Categoria Outros","url":"https:\/\/categoriaoutros.com.br\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/logo\/image\/","url":"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/categoriaoutros-logo.jpg","contentUrl":"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/categoriaoutros-logo.jpg","width":400,"height":400,"caption":"Categoria Outros"},"image":{"@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/categoriaoutros","https:\/\/twitter.com\/CategoriaOutros","https:\/\/br.pinterest.com\/CategoriaOutros\/"]},{"@type":"Person","@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/ba0f432708449436912bd6736864bb40","name":"Categoria: Outros","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ed97775f0ab50750ed638ed3417ea85e19ced2c648da167a108e393ae5fd9e33?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ed97775f0ab50750ed638ed3417ea85e19ced2c648da167a108e393ae5fd9e33?s=96&d=mm&r=g","caption":"Categoria: Outros"},"sameAs":["http:\/\/categoriaoutros.com.br"],"url":"https:\/\/categoriaoutros.com.br\/?author=1"}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/posts\/14882","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=14882"}],"version-history":[{"count":3,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/posts\/14882\/revisions"}],"predecessor-version":[{"id":14885,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/posts\/14882\/revisions\/14885"}],"wp:attachment":[{"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=14882"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=14882"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=14882"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}