Angularjs menetapkan kandungan lalai dalam textarea

Question

Saya ada permintaan yang agak pelik. . Iaitu, apabila kawasan teks tidak dipilih oleh tetikus, akan ada baris gesaan kelabu dalam kotak teks. Ini sangat mudah, ia boleh dicapai dengan menggunakan nilai, pemegang tempat dan sebagainya. Tetapi apabila anda mengklik untuk memilih textarea, iaitu, apabila anda mula menaip kandungan, mesti ada baris kandungan yang diisi secara lalai dalam textarea. .
Tidak ada gambar, jadi saya akan menerangkannya dalam format.

[#我是defaulttitle# Saya pemegang tempat]-->Kandungan yang dipaparkan sebelum kawasan teks tidak dipilih.
[#我是defaulttitle#]-->Selepas memilih kawasan teks, kandungan dalam kotak teks akan hilang, tetapi tajuk lalai akan kekal.

Bagaimana untuk melaksanakan fungsi sedemikian?

Answer 1

#html
<p ng-controller="DemoCtrl">
    <textarea
            ng-model="content"
            placeholder="{{placeholder}}"
            ng-focus="focus()"
            ng-blur="blur()"></textarea>
</p>

#js
angular.module('app', [])

        .controller('DemoCtrl', function ($scope) {
            var defaultTitle = '#我是默认标题#';
            var defaultPlaceholder = '我是placeholder';
            $scope.placeholder = defaultTitle + ' ' + defaultPlaceholder;

            $scope.content = '';

            $scope.focus = function () {
                if (!$scope.content) {
                    $scope.content = defaultTitle;
                }
            };

            $scope.blur = function () {
                if ($scope.content === defaultTitle) {
                    $scope.content = '';
                }
            };
        })

Answer 2

Saya fikir adalah lebih baik untuk menukar soalan anda menjadi arahan. Berikut ialah pelaksanaan asas saya.

html

<p ng-controller="main">
        <textarea my-textarea="#我是默认标题#" placeholder="我是placeholder" ng-model="myText" ng-change="log()"></textarea>
    </p>


    <script type="text/javascript">
    var app = angular.module('app', []);

    app.directive('myTextarea', function() {

        return {

            require: 'ngModel',

            link: function(scope, ele, attrs, modelController) {

                var text = attrs.myTextarea;
                var placeholder = attrs.placeholder;

                var alltext = text + ' ' + placeholder;

                ele.attr('placeholder', alltext);

                ele.on('focus', function() {
                    if (!modelController.$modelValue) {
                        setVal(text);
                    }

                });

                ele.on('blur', function() {
                    if (modelController.$modelValue === text) {
                        setVal('');
                    }
                });

                function setVal(v) {
                    modelController.$setViewValue(v);
                    modelController.$render();
                }

            }

        }

    });

    app.controller('main', ['$scope', function($scope){

        $scope.log = function() {
            console.log($scope.myText)
        }
    }]);

Idea asas adalah untuk mengawalnya melalui pengawal model.