AngularJS指令输入宽度通过keyup调整大小

Question

我创建了一个指令,以便在keyup(如Google Contacts)时自动调整宽度的输入.然而,似乎不太好,因为每个字符的宽度是不同的.你能帮我提一下更优化的方法吗？韩国社交协会.

http://plnkr.co/edit/DSn0JDDShOXvuXXF9PP2?p=preview

Answer 1

基于@ notme的答案,我为自己的自动调整大小输入角度指令版本创建了以下要点:

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

这是代码:

模板:

<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');
          }   
        }); 
      }   
    };  
  });

Answer 2

您可以创建一个虚拟范围来存储输入文本字段中的相同字符串.
在keyup上,您可以刷新span内容并获取新长度.
最好为span和input文本创建带有文本样式定义的css规则,因此您确定它们具有相同的字体样式.

你的指令看起来像这样:

html的

<div edit-inline>
  <input type="text" value="hello world">
  <span class="dummy">blbla</span>
</div>

.js文件

app.directive("editInline", function(){
    return function(scope, element, attr){
      var elInput = element.find('input');
      var elDummy = element.find('span');
      var inputText = elInput.val();
      elDummy.html(inputText);
      elInput.bind("keyup", function(){
        var inputText = elInput.val();
        elDummy.html(inputText);
        elInput.css('width', elDummy[0].offsetWidth + 'px');
      });

    }
});  

的CSS

input, .dummy {
  font-size: 12px;
  font-family: Arial;
  white-space:pre;
}

.dummy {
  visibility:hidden; // this would prevent the dummy text to be shown without losing its size
} 

在这里你可以看到plunker