- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
现在我需要在聚焦输入和模糊输入时显示不同的文本。
如果我将鼠标放在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/
现在我需要在聚焦输入和模糊输入时显示不同的文本。 如果我将鼠标放在input上,我想更改displayText并显示displayText,那么它将显示“网络文本”。 这是我的代码:
以下是我的一个 ASP MVC3 索引页面上表格第一行的第一部分。我在该页面加载时逐步执行了代码,并且可以看到条件评估已正确完成,但“CE”或“PT”显示却没有。我是 ASP MVC 的新手,有人可以
我在网格中有一个计算数字字段。我为此使用自定义编辑器。过滤器编辑器中的所有过滤器操作都运行良好,但自动过滤器行根据值而不是显示文本进行过滤。我知道我可以将 FilterMode 设置为 Display
我已经在此处的 jquery-jtable Github 问题部分提出了这个问题:https://github.com/hikalkan/jtable/issues/703 .目前似乎没有太多知识在那
我在 qml 中遇到了这个错误,我不知道如何处理它。请帮我。这是我的代码: StyledTextField { readOnly: false
我一直在摆弄typeahead.js模板。无论我做什么,我都会不断收到以下错误: Uncaught TypeError: this.displayText(...).toLowerCase is no
我正在获取用户的显示文本和电子邮件,但我不知道如何将其插入“人员或组”列。 function getUserInfo(PeoplepickerId) { var UsersID="";
我是一名优秀的程序员,十分优秀!