4

Preciso fazer um formulário para impressão que poderia ser digitado no navegador ou impresso para escrita.

Como pode ser escrito na folha impressa, preciso de um estino na textarea que desenhe as linhas como se fosse um caderno. Preciso desse modelo: inserir a descrição da imagem aqui

body {
                width: 670px;
                margin-left: 20px;
                margin-right: 20px;
                margin-left: auto;
                margin-right: auto;
            }
            input {
                border-color: #ffffff #ffffff #000000;
                border-style: solid solid dotted;
                border-width: 0 0 1px;
                font-size: 11pt;
                font-weight: bold;
            }

            table {
                width: 100%;
            }
            .td_linha {
                display: table;
                width: 100%;
            }
            .label_campo{
                display: table-cell;
                width: 1%;
            }
            .input_linha{
                display: table-cell;
                width: 100%;
            }
<html>
    <head>
        <title>declaracao</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <h1>DECLARAÇÃO</h1>
        <table>
            <tr>
                <td colspan="2" class="td_linha">
                    <label class="label_campo">Eu,</label>
                    <input class="input_linha">
                </td>
            </tr>
            <tr>
                <td>
                    <label>RG</label> <input id="rg">
                    <label>,CPF</label> <input id="cpf">
                </td>
            </tr>
            <tr>
                <td colspan="2" class="td_linha">
                    <label class="label_campo">Residente</label> 
                    <input class="input_linha">
                </td>
            </tr>
            <tr>
                <td>
                    <label>CEP</label> <input id="cep">
                </td>
            </tr>
        </table>
        <p>DECLARO, perante o Instituto </p>
        _____________________________________________________________<br/>
        _____________________________________________________________<br/>
        _____________________________________________________________<br/>
        _____________________________________________________________<br/>
        _____________________________________________________________<br/>
        _____________________________________________________________<br/>
        _____________________________________________________________<br/>
        _____________________________________________________________<br/>
        _____________________________________________________________<br/>
        _____________________________________________________________<br/>
        _____________________________________________________________<br/>
        _____________________________________________________________<br/>
        _____________________________________________________________<br/>
        _____________________________________________________________<br/>
        <p>Declaro, outrossim, estar ciente de que, se em qualquer época, ficar 
            comprovado a inexatidão destas declarações, estarei incurso nos artigos 
            171 e 299 do Código Penal.</p>
        São Paulo, ______ de __________________ de __________.<br/>
        _______________________________________________<br/>
        <hr/>
</body>
</html>

Até agora o que fiz foi o formulário acima, mas preciso substituir as linhas pelo textarea para ser preenchível.

2 Respostas 2

3

Um modo simples é definindo um background num textaterea.

textarea{
background-image: url("https://i.sstatic.net/yWNH7.png");
font-size:21px;
}
<textarea cols="20" rows="10">texto qualquer
foo bar
</textarea>

A técnica usada aqui é uma imagem de 1px de largura por 24px de altura.

Na posição y:23, 1 único pixel possui cor preta.

Com isso, ao anexar como background, a imagem se repete continuamente horizontalmente e verticalmente em novas linhas, o que gera o efeito visual que necessita.

Para os outros campos, Eu, __________ RG ______________ CPF__________, como são campos de uma única linha, então basta usar input type=text e definir border-bottom com css.

2
  • É uma solução viável, só que dá um pau na renderização quando passa a altura do textarea, desencontrando a imagem do texto. Obrigado, mas acabei criando outra solução que, embora não seja com o textarea, acho que ficou mais porformático. Valeu Commented 20/03/2016 às 17:50
  • Para "não dar pau" apenas ajuste o textarea na mesma proporção da imagem. E de preferência use uma fonte de espaçamento uniforme cujas dimensões também devem ser proporcionais. Commented 20/03/2016 às 18:09
1

A resposta do acima do Daniel Omine resolve o problema do textarea, mas resolvi o problema de uma maneira que acredito ficar mais agradável para o usuário.

Mantive linhas no html com inputs estilizadas, mas ,ao clicar na área do texto, ao invés de inserir texto nesses inputs, substituí a área com uma textarea para edição. Essa textarea vai ficar sem linhas mesmo. Assim, quando for impressa terá somente o texto editado, sendo assim, o usuário tem duas opções ou escreve tudo no browser ou escreve tudo a mão. Não tem opção de um ou outro. É bom por que impede o usuário de fazer emendas no documento.

Como estou usando angular algumas coisas foram adaptadas para angular.

 body {
                width: 550px;
                margin-left: 10pt;
                margin-right: 20px;
                margin-left: auto;
                margin-right: auto;
                font-size:  12pt;
            }
            h1{
                font-size: 15pt;
            }
            h1, .assinatura{
                text-align: center;
                margin: 50px;
            }
            input {
                margin-left: 5px;
            }
            input, .linha_declaracao {
                border-color: #ffffff #ffffff #000000;
                border-style: solid solid dotted;
                border-width: 0 0 1px;
                font-size: 09pt;
            }
            .input_linha, .linha_declaracao{
                display: table-cell;
                width: 100%;
            }
            table, .linha_declaracao {
                width: 100%;
            }
            .td_linha {
                display: table;
                width: 100%;
            }
            .label_campo{
                display: table-cell;
                width: 1%;
            }
            .input_center{
                text-align: center;
            }
            textarea{
                width: 100%;
                text-align: justify;
                border: none;
            }
<body ng-app="declaracao" ng-controller="MainCtrl">
        <h1>DECLARAÇÃO</h1>
        <table>
            <tr>
                <td colspan="2" class="td_linha">
                    <label class="label_campo">Eu, </label>
                    <input class="input_linha" ng-model="nome">
                </td>
            </tr>
            <tr>
                <td>
                    <label>RG</label> <input id="rg" ng-model="rg">
                    <label>, CPF</label> <input id="cpf" ng-model="cpf">
                </td>
            </tr>
            <tr>
                <td colspan="2" class="td_linha">
                    <label class="label_campo">Residente</label> 
                    <input class="input_linha" ng-model="endereco">
                </td>
            </tr>
            <tr>
                <td>
                    <label>CEP</label> <input id="cep" ng-model="cep">
                </td>
            </tr>
        </table>

        <p>DECLARO, perante o Instituto </p>

        <textarea onshow="focar()" id="textarea" ng-hide="!showTextarea" 
                  ng-show="showTextarea" ng-model="textarea" ng-blur="verificarTextarea()">
        </textarea>

        <table id="table_linhas" ng-click="exibeTextArea()" ng-hide="showTextarea">
            <tr> <td class="td_linha"> <input class="linha_declaracao"></ input> </td> </tr>
            <tr> <td class="td_linha"> <input class="linha_declaracao"></ input> </td> </tr>
            <tr> <td class="td_linha"> <input class="linha_declaracao"></ input> </td> </tr>
            <tr> <td class="td_linha"> <input class="linha_declaracao"></ input> </td> </tr>
            <tr> <td class="td_linha"> <input class="linha_declaracao"></ input> </td> </tr>
            <tr> <td class="td_linha"> <input class="linha_declaracao"></ input> </td> </tr>
            <tr> <td class="td_linha"> <input class="linha_declaracao"></ input> </td> </tr>
            <tr> <td class="td_linha"> <input class="linha_declaracao"></ input> </td> </tr>
            <tr> <td class="td_linha"> <input class="linha_declaracao"></ input> </td> </tr>
            <tr> <td class="td_linha"> <input class="linha_declaracao"></ input> </td> </tr>
            <tr> <td class="td_linha"> <input class="linha_declaracao"></ input> </td> </tr>
            <tr> <td class="td_linha"> <input class="linha_declaracao"></ input> </td> </tr>
            <tr> <td class="td_linha"> <input class="linha_declaracao"></ input> </td> </tr>
            <tr> <td class="td_linha"> <input class="linha_declaracao"></ input> </td> </tr>
            <tr> <td class="td_linha"> <input class="linha_declaracao"></ input> </td> </tr>
            <tr> <td class="td_linha"> <input class="linha_declaracao"></ input> </td> </tr>
        </table>

        <p>Declaro, outrossim, estar ciente de que, se em qualquer época, ficar 
            comprovado a inexatidão destas declarações, estarei incurso nos artigos 
            171 e 299 do Código Penal.</p>

        <div class="assinatura">
            <p>
                São Paulo, <input class="input_center" value=""><br>
                <span>Data</span>
            </p>
            <p>
                ____________________________________________<br>
                <span>Assinatura do declarante</span>
            </p>
        </div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
            var app = angular.module('declaracao', []);
            app.controller('MainCtrl', function ($scope, $location, focus) {
                    var qs = $location.search();
                    var url = $location.url();
                    
                    $scope.nome = qs.nome;
                    $scope.rg = qs.rg;
                    $scope.cpf = qs.cpf;
                    $scope.endereco = qs.end;
                    $scope.cep = qs.cep;
                    $scope.textarea = '';
                    $scope.showTextarea = false;

                    $scope.exibeTextArea = function () {
                        $scope.showTextarea = true;
                        focus('textarea');
                    }

                    $scope.verificarTextarea = function () {
                        if (!$scope.textarea) {
                            $scope.showTextarea = false;
                        }
                    }

                });
            
            app.factory('focus', function ($timeout, $window) {
                return function (id) {
                    console.log('chamou focus');
                    // timeout makes sure that it is invoked after any other event has been triggered.
                    // e.g. click events that need to run before the focus or
                    // inputs elements that are in a disabled state but are enabled when those events
                    // are triggered.
                    $timeout(function () {
                        var element = $window.document.getElementById(id);
                        if (element)
                            element.focus();
                    });
                };
            });

        </script>

    </body>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .