textarea with lines of notebook style

Question

textarea with lines of notebook style

Navigation

#1 by (3 votes)
#2 by (1 votes)

4

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

As can be written on the printed sheet, I need a bookmark 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 above form, but I need to replace the lines with the textarea to be fillable.

css textarea

asked by anonymous 20.03.2016 / 16:12

2 answers

1

The answer above Daniel Omine solves the problem of textarea, but I solved the problem in a way that I believe to be more pleasing to the user.

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

As I am 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>

20.03.2016 / 18:59

Should I compress files to save to the database? Call an asynchronous function in an ActionResult?

score 3 · Accepted Answer

A simple way is to define a background in a text field.

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 an image of 1px wide by 24px height.

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

By attaching as background, the image repeats horizontally and vertically in new lines, which creates the visual effect it needs.

For the other fields, Eu, __________ RG ______________ CPF__________ , as are single-line fields, then just use input type=text and set border-bottom with css.