Textarea automatically resizes, and when it becomes long, the opening sentence is hidden above.

Thank you for your help.I am developing using Angularjs at Monaca.
This time, I would like to make a notepad that automatically resizes the text area according to the number of characters.
So I implemented the program by referring to the script angular-elastic in Github.

As a result, it worked as expected on Windows PC without any problems.
However, when I tried using iphone6 (ver9.2), I had a problem that the longer I type, the more hidden the opening sentence is.
Also, if it is only in English, it is displayed without any problems.

My goal is not to hide even in Japanese.
Could you give me some advice?Thank you for your cooperation.

<!DOCTYPE HTML>
<htmlng-app="elasticDemo">
<head>    
    <metacharset="utf-8">    
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scale=no">    
    <meta http-equiv="Content-Security-Policy" content="default-src*data:;style-src*'unsafe-inline';script-src*'unsafe-inline'"unsafe-eval'">
    <script src="components/loader.js"></script>
    <script src="js/winstore-jscompat.js"></script>
    <link rel="stylesset" href="components/monaca-onsenui/js/angular/angular-csp.css">
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">    
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>                     
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
    <script src="elastic.js"></script>
    <script>
        angular.module ('elasticDemo', ['monospaced.elastic')
          .controller('elasticDemoController', ['$scope', function($scope){
            'use strict';            
            $scope.bar = 'Elastic with a CSS transition.Try typing something...';            
          }])

    </script>
    <style>
        US>html{
          background: #e7f3ff;
          color: #1c000e;
          text-shadow:01px0#ff;
        }
        body{
          margin —8px auto;
          max-width —90%;
          width —480px;
        }
        h1{
          margin —00 8px;
          font-weight:normal;
          font-size: 30px;
        }     
        textarea{
          padding —10px;
          width —300px;
          max-width —90%;
        }
        .animate:focus{
          - webkit-transition:height 50 msease-in-out;
             -moz-transition —height 50 msease-in-out;
               -o-transition —height 50 msease-in-out;
                  transition —height 50 msease-in-out;
        }
        .msd-elastic{
          max-height —400px;
        }        
      </style>    
</head>
<body data-ng-controller="elasticDemoController">

  <h1>Angular Elastic</h1>
  <textarea class="animate msd-elastic:\n;"data-ng-model="bar"></textarea>    

</body>
</html>

ios monaca html angularjs

2022-09-30 18:40

1 Answers

I solved myself.After specifying the textarea line spacing in the CSS, the opening sentence was displayed without hiding.

textarea{
  line-height:1em;
}

2022-09-30 18:40

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656