Javascript 从第一次加载页面开始调整输入框的宽度
我随后创建了一个宽度灵活的输入字段：： 问题是当第一次加载页面时，输入框的宽度没有调整；我们需要修改其内容以触发调整 有人知道如何修复此问题吗？您可以使用$timeout在下一个摘要周期中触发更改。请检查代码段是否正常工作 角度。模块'YourApp'，[] .controller'YourController'，['$scope'，函数$scope{ $scope.title=非常非常非常长 }] .directiveeditInline，函数$timeout{ 返回函数范围、元素、属性{ var elInput=element.find'flexibleInput'； var-elDummy=element.find'flexibleDummy'； var inputText=elInput.val； elInput.bindkeydown键向上，函数{ scope.modFun； }; scope.modFun=函数{ var inputText=elInput.val； elDummy.htmlinputText； option1=elDummy[0]。网外宽度； css'width'，option1+'px'； } $timeoutfunction{ scope.modFun； }; } }; blblapxJavascript 从第一次加载页面开始调整输入框的宽度,javascript,css,angularjs,angularjs-directive,Javascript,Css,Angularjs,Angularjs Directive,我随后创建了一个宽度灵活的输入字段：： 问题是当第一次加载页面时，输入框的宽度没有调整；我们需要修改其内容以触发调整 有人知道如何修复此问题吗？您可以使用$timeout在下一个摘要周期中触发更改。请检查代码段是否正常工作 角度。模块'YourApp'，[] .controller'YourController'，['$scope'，函数$scope{ $scope.title=非常非常非常长 }] .directiveeditInline，函数$timeout{ 返回函数范围、元素、属性{
<!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>