2

はじめまして。質問させていただきます。現在、angularを採用したprojectで以下のような、textareaをdirectiveをつくり実装しています。ベーシックなtextareaとは異なり、値を入力してEnterキーを押すとformをsubmitさせる処理を与えたいと思っています。試行錯誤していますが解決できず困っています。inputでは文章がかなりはみ出てしまい、どうしてもtextareaでsubmitさせたいです。どうかよろしくお願いいたします

===

/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.$watch attrs.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
  }

1 件の回答 1

2

http://qiita.com/ikm/items/4fc4450ed8eb213039d8
keypressでEnterが押されたか確認し、FormのSubmitを行えば良いと思います。

angularで書いた場合のサンプルを作りましたので参考にして下さい。

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

app.directive('enterSubmitForm', function(){
    return{
        controller: function($scope, $element){
            this.submit = function(){
                $element[0].submit();
            }
        }
    }
});
app.directive('enterSubmit', function($rootScope){   
  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 ng-model="text" enter-submit></textarea>
   </form>
</div>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。