11537


詰まってしまって困っているので質問させてください；；

AngularJSで編集可能なフィールドをつくり、Todoリスト名とTodoの内容を更新できるようにしたく、Editableなライブラリとして、[mkwidzinska/editablespan](https://github.com/mkwidzinska/editablespan)
を採用しています。

editablespanタグで囲まれたテキストをクリックするとinputタグに置き換えられ変更可能になり、エンターキーで変更が確定されDBに保存させるところまでは実装できているのですが、できれば、inputタグではなくtextareaタグで同様のことを実現させたいです。

残念ながら仕様ではinputにしか対応しておらず、、配布元の、mkwidzinska/editablespanのドキュメントを読みJSFiddleでコードを変更しながらなんとか、テキストをクリックするとtextareaタグに置き換わるところまでは実現させることができたのですが、Enterを押すと改行になってしまい、変更が確定されません。

こちらの [test shift+enter with angularjs -
CodePen](http://codepen.io/y__b__y/pen/afFec?editors=101)
も参考にしながら試行錯誤しているのですがどうしても実現させることがきなかったので質問させていただきました。どうかよろしくお願いいたします。

[code]

    // directive code, scroll down for the controller!
    
    /* mk.editablespan - v1.0.0 - 2013-08-26 */
    var mod=angular.module("mk.editablespan",[]);mod.directive("editablespan",function(){return{restrict:"E",template:'<div><span ng-hide="editing" ng-class="spanClass">{{text}}</span><form ng-show="editing"><textarea  ng-class="inputClass"></textarea></form><div>',scope:{text:"=model",onReady:"&",spanClass:"@",inputClass:"@"},replace:!0,link:function(a,b){function c(){d(),h(!0),l[0].focus()}function d(){l.bind("blur",function(){f()}),l.bind("keyup",function(a){i(a)&&f()}),k.bind("submit",function(){l[0].value&&e(),f()})}function e(){a.text=l[0].value,a.$apply(),a.onReady()}function f(){g(),h(!1)}function g(){l.unbind(),k.unbind()}function h(b){a.editing=b,a.$apply()}function i(a){return a&&27==a.keyCode}var j=angular.element(b.children()[0]),k=angular.element(b.children()[1]),l=angular.element(b.children()[1][0]);j.bind("click",function(){l[0].value=a.text,c()})}}});
    
    //---------------------------------------------------------
    
    var app = angular.module('editApp', ['mk.editablespan']);
    
    app.controller('editController', function($scope) {
      $scope.item = {description: "This is a new item"};
      $scope.message = "";
    
      $scope.onReady = function(item) {
        $scope.message = "controller: edit ready, item description: " + item.description;
      };
    });
    
[/code]


CC BY-SA 3.0
2015-06-19T13:29:56.280
11533
2015-06-19T15:23:38.200
9900
question
javascript angularjs
Rails+AngularJSで、editablespanタグで囲まれた要素をinputタグではなくtextareaタグに置き換えたいです


タグをtextareaに変えて、keyupイベントでshift-
enterと同じキーコードのチェックをするようにしました。試してみると分かりますが、編集後の文字列が改行を含む場合でも１行で表示されるなど、不具合がありますので、改良が必要でしょう。

[code]

    diff --git a/src/mk-editable-span.js b/src/mk-editable-span.js
    index 00315cb..7e7d47f 100644
    --- a/src/mk-editable-span.js
    +++ b/src/mk-editable-span.js
    @@ -3,7 +3,7 @@ var mod = angular.module('mk.editablespan', []);
     mod.directive('editablespan', function() {
       return {
         restrict: 'E',
    -    template: '<div><span ng-hide="editing" ng-class="spanClass">{{text}}</span><form ng-show="editing"><input type="{{getInputType()}}" ng-class="inputClass"></form><div>',
    +    template: '<div><span ng-hide="editing" ng-class="spanClass">{{text}}</span><form ng-show="editing"><textarea type="{{getInputType()}}" ng-class="inputClass"></textarea></form></div>',
         scope: {
           text: '=model',
           onReady: '&',
    @@ -38,6 +38,14 @@ mod.directive('editablespan', function() {
             });
    
             input.bind('keyup', function(event) {
    +         var code = event.keyCode || event.which;
    +         if (code === 13) {
    +             if (!event.shiftKey) {
    +                 stopEdit();
    +                 save();
    +             }
    +         }
    +
               if(isEscape(event)) {
                 stopEdit();
               }
    
[/code]


CC BY-SA 3.0
2015-06-19T15:18:07.843
11537
2015-06-19T15:23:38.200
2015-06-19T15:23:38.200
7837
7837
11533
answer