AngularJS指令输入宽度由KEYUP调整 [英] AngularJS directive input width resize by keyup

问题描述

我为了让已经宽度自动调整一个输入时KEYUP（如谷歌联系人）创建的指令。然而，它似乎并没有被确定，因为每个字符的宽度是不同的。你能帮我给一个更优化的方式？ TKS。

I created a directive in order to make a input that has width automatically resized when keyup (like Google Contacts). However it seems not to be ok, because the width of each characters is different. Could you please help me to give a more optimized way? Tks.

http://plnkr.co/edit/DSn0JDDShOXvuXXF9PP2?p=$p$ PVIEW

推荐答案

根据@ notme的答案，我创建了下面的要点为我自己的版本可自动调整输入角度指令：

Based on @notme's answer I created the following gist for my own version of an auto-resizing input angular directive:

https://gist.github.com/Zmaster/6923413

下面是code：

模板：

<span>
  <input type="text" ng-model="value">
  <span style="visibility:hidden; position:absolute; left:-1000; top:-1000;">{{value}}</span>
</span>

指令：

angular.module('autoSizeInput', []) 
  .directive('autoSizeInput', function() {
    return {
      replace: true,
      scope: {
        value: '=inputValue'
      },  
      templateUrl: 'templates/directives/autoSizeInput.html',
      link: function(scope, element, attrs) {
        var elInput = element.find('input');
        var elSpan = element.find('span');
        elSpan.html(elInput.val());

        scope.$watch('value', function(value) {
          if(value) {
            elSpan.html(elInput.val());
            elInput.css('width', (elSpan[0].offsetWidth + 10) + 'px');
          }   
        }); 
      }   
    };  
  });

这篇关于AngularJS指令输入宽度由KEYUP调整的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！