gpt4 book ai didi

javascript - 如何更改 `displayText`并在焦点输入时显示 `displayText`?

转载 作者:行者123 更新时间:2023-12-03 05:55:54 25 4
gpt4 key购买 nike

现在我需要在聚焦输入和模糊输入时显示不同的文本。

如果我将鼠标放在input上,我想更改displayText并显示displayText,那么它将显示“网络文本”。

这是我的代码:

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.centerBigView {
margin: auto;
width: 900px;
height: 1000px;
background-color: rebeccapurple;
}

.topSearchView {
margin: 20px auto;
width: 300px;
height: 40px;
background-color: yellow;
}

.topSearchView input {
display: block;
margin: auto;
}

.resultView {
margin: auto;
width: 600px;
background-color: darkgrey;
}

li {
color: white;
}
</style>
</head>
<script src="angular.js"></script>
<body ng-app="searchAPP" ng-controller="controller11">
<div class="centerBigView">
<div class="topSearchView">
<input type="text"
blurred-focused='databaseForm.connectionName' displayText="" name="connectionName">
</div>
<div class="resultView">
<ul>
<li>
<span>{{displayText}}</span>
</li>
</ul>
</div>
</div>
<script>
var app = angular.module("searchAPP", []);
app.controller('controller11', ['$scope', function ($scope) {

$scope.displayText = "nature animal plant";;
}]);
app.directive("blurredFocused", [function () {
return {
restrict: "A",
priority: -1,
scope: {
blurredFocused: "="
},
link: function (scope, ele, attrs) {
ele.on("blur", function () {
scope.$apply(function () {

});

});
ele.on("focus", function () {
scope.$apply(
attrs.displayText = "networkText";
);
})
}
}
}]);
</script>
</body>
</html>

最佳答案

如果您需要隔离范围,那么有两种选择第一个选项是使用回调 updateDisplayText,如下所示:

JS

app.controller('controller11', ['$scope', function ($scope) {
$scope.displayText = "nature animal plant";
$scope.updateDisplayText = function(text) {
$scope.displayText = text;
}
}]);
app.directive("blurredFocused", [function () {
return {
restrict: "A",
priority: -1,
scope: {
updateDisplayText: "="
},
link: function (scope, ele, attrs) {
ele.on("blur", function () {
scope.$apply(function () {
scope.updateDisplayText("nature animal plant");
});

});
ele.on("focus", function () {
scope.$apply(function() {
scope.updateDisplayText("networkText");
}
);
})
}
}
}]);

HTML

<div class="topSearchView">
<input type="text"
blurred-focused='databaseForm.connectionName' update-display-text="updateDisplayText" name="connectionName">
</div>
<div class="resultView">
<ul>
<li>
<span>{{displayText}}</span>
</li>
</ul>
</div>

第二种方法是将 displayValue 作为一个对象,如下所示:

JS

app.controller('controller11', ['$scope', function ($scope) {
$scope.displayText = {value: "nature animal plant"};
}]);
app.directive("blurredFocused", [function () {
return {
restrict: "A",
priority: -1,
scope: {
displayText: "="
},
link: function (scope, ele, attrs) {
ele.on("blur", function () {
scope.$apply(function () {
scope.displayText.value = "nature animal plant";
});

});
ele.on("focus", function () {
scope.$apply(function() {
scope.displayText.value = "networkText";
}
);
})
}
}
}]);

HTML

<div class="topSearchView">
<input type="text"
blurred-focused='databaseForm.connectionName' display-text="displayText" name="connectionName">
</div>
<div class="resultView">
<ul>
<li>
<span>{{displayText.value}}</span>
</li>
</ul>
</div>

关于javascript - 如何更改 `displayText`并在焦点输入时显示 `displayText`?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39928331/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com