textarea with notebook lines style

Question

textarea with notebook lines style

Asked 8 years, 8 months ago

Viewed 1,310 times

4

I need to make a form for printing that could be typed in the browser or printed for writing.

As it can be written on the printed sheet, I need a style in the textarea that draws the lines as if it were a notebook. I need this model:

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>

So far what I did was the form above, but I need to replace the lines by the textarea to be fillable.

2 answers

3

A simple way is to define a background in a textaterea.

textarea{
background-image: url("http://i.stack.imgur.com/yWNH7.png");
font-size:21px;
}

<textarea cols="20" rows="10">texto qualquer
foo bar
</textarea>

The technique used here is a 1px image of width by 24px of height.

At position y:23, 1 single pixel has black color.

With this, when attaching as background, the image repeats continuously horizontally and vertically in new lines, which generates the visual effect you need.

To the other fields, Eu, __________ RG ______________ CPF__________, as are fields of a single line, so just use input type=text and define border-bottom css.

It is a viable solution, only that it takes a dick in the rendering when it passes the height of the textarea, disengaging the image of the text. Thanks, but I ended up creating another solution that, although not with the textarea, I think it got more porformático. Thanks

– Paulo Henrique

2016/03/20 at 17:50
To "don’t mess around" just adjust the textarea in the same aspect ratio as the image. And preferably use a uniform spacing source whose dimensions should also be proportional.

– Daniel Omine

2016/03/20 at 18:09

Browser other questions tagged css form impression textarea

You are not signed in. Login or sign up in order to post.

by Paulo Henrique • **592** points · Answer 1 · 2016-03-20T17:59:22+00:00

The answer above from Daniel Omine solves the textarea problem, but I solved the problem in a way that I believe is more pleasant for the user.

I kept lines in html with stylized inputs, but ,when clicking on the text area, instead of inserting text into these inputs, I replaced the area with a textarea for editing. This textarea will be without lines anyway. Thus, when it is printed it will have only the edited text, so the user has two options either writes everything in the browser or writes everything by hand. There is no option of either. It is good because it prevents the user from making amendments to the document.

As I’m using angular some things have been adapted to 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>