从第一次加载页面开始调整输入框的宽度答案

【问题标题】：Adjust the width of the input box from the first loading of a page从第一次加载页面开始调整输入框的宽度
【发布时间】：2018-01-08 10:02:26
【问题描述】：

我跟着this thread做了一个宽度灵活的输入框：JSBin：

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="YourApp"> 
  <div ng-controller="YourController">
     <div edit-inline>
        <input id="flexibleInput" ng-model="title" ></input>
        <span id="flexibleDummy" style="visibility:hidden; position:absolute; left:-1000px; top:-1000">blblapx</span>
     </div>
  </div>
  <script type="text/javascript"> 
    angular.module('YourApp', [])
    .controller('YourController', ['$scope', function ($scope) {
      $scope.title = "very very vry very very very very very very very long"
    }])
    .directive("editInline", function(){
        return function(scope, element, attr){
            var elInput = element.find('#flexibleInput');
            var elDummy = element.find('#flexibleDummy');
            var inputText = elInput.val();
            elInput.bind("keydown keyup", function(){
                var inputText = elInput.val();
                elDummy.html(inputText);
                option1 = elDummy[0].offsetWidth;
                elInput.css('width', option1 + 'px');
            });
        }
    });
  </script> 
</body>
</html>

问题是第一次加载页面时，输入框的宽度没有调整；我们需要修改它的内容来触发调整。

有谁知道如何解决这个问题？

【问题讨论】：

标签： javascript css angularjs angularjs-directive

【解决方案1】：

您可以使用 $timeout 在下一个摘要周期触发您的更改。（检查 sn-p 工作）

angular.module('YourApp', [])
  .controller('YourController', ['$scope', function($scope) {
    $scope.title = "very very vry very very very very very very very long"
  }])
  .directive("editInline", function($timeout) {
    return function(scope, element, attr) {
      var elInput = element.find('#flexibleInput');
      var elDummy = element.find('#flexibleDummy');
      var inputText = elInput.val();
      elInput.bind("keydown keyup", function() {
        scope.modFun();
      });
      scope.modFun = function() {
        var inputText = elInput.val();
        elDummy.html(inputText);
        option1 = elDummy[0].offsetWidth;
        elInput.css('width', option1 + 'px');
      }
      $timeout(function () {
         scope.modFun();
      });
      
    }
  });

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>

<body ng-app="YourApp">
  <div ng-controller="YourController">
    <div edit-inline>
      <input id="flexibleInput" ng-model="title" />
      <span id="flexibleDummy" style="visibility:hidden; position:absolute; left:-1000px; top:-1000">blblapx</span>
    </div>
  </div>

</body>

</html>

【讨论】：