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

发布时间：2020-12-17 18:00:43 所属栏目：安全来源：网络整理

导读：我创建了一个指令,以便在keyup(如Google Contacts)时自动调整宽度的输入.然而,似乎不太好,因为每个字符的宽度是不同的.你能帮我提一下更优化的方法吗？韩国社交协会. http://plnkr.co/edit/DSn0JDDShOXvuXXF9PP2?p=preview 解决方法基于@ notme的答案,我为

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

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

解决方法

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!