Directive for textarea where the value is submitted with the Enter

Asked 2 years ago, Updated 2 years ago, 83 views

Nice to meet you.Let me ask you a question.Currently, we have created and implemented textarea as follows for projects using angular.Unlike the basic textarea, I would like to submit the form by entering a value and pressing Enter.I've tried and tried, but I'm in trouble because I can't solveThe text sticks out a lot with input, so I really want to submit it with textarea.Thank you for your cooperation

===

/assets/javascripts/directives/resizeTextarea.coffee

mod.directive 'resizeTextarea', ->
  {
    restrict: 'A'
    require: '?ngModel'
    link:(scope, element, attrs, ngModel) ->
      HEIGHT=25
      el=angular.element(element[0])
      el.css 'lineHeight', HEIGHT+'px'
      el.css 'height', HEIGHT + 'px'

      resize=(e)->
        textHeight=e.target.scrollHeight
        height=~(textHeight/HEIGHT)*HEIGHT
        el.css 'height', height+'px'
        return

      el.on 'input', resize
      scope.$watchattrs.ngModel, (value)->
        if value == undefined
          return
        textHeight=el[0].scrollHeight
        height=~(textHeight/HEIGHT)*HEIGHT
        el.css 'height', height+'px'
        return
      ngModel.$parsers.unshift(viewValue)->
        viewValue
      return
  }

javascript angularjs coffeescript

2022-09-30 16:40

1 Answers

http://qiita.com/ikm/items/4fc4450ed8eb213039d8
I think you can check if Enter is pressed on the keypress and submit the form.

I have made a sample for writing in angular, so please refer to it.

var app=angular.module('app',[]);
app.controller("ctrl", function($scope){
  $scope.text="init";
});

app.directive('enterSubmitForm', function(){
    US>return{
        controller:function($scope,$element){
            This.submit=function(){
                $element[0].submit();
            }
        }
    }
});
app.directive('enterSubmit', function($rootScope){   
  US>return{
    require: '^enterSubmitForm',
    link:function($scope,$element,attrs,ctrl){
        $element.on('keypress', function(e){
            if(e.keyCode==13){
               $rootScope.$apply(function(){
                  ctrl.submit();
               });
            }
        });
    }
  };                                                                
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app"ng-controller="ctrl">
  <form enter-submit-form>
     <textarea-model="text"enter-submit></textarea>
   </form>
</div>


2022-09-30 16:40

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.