Question

我需要x图标来删除输入字段值 1.当用户输入任何内容时，将显示“x”图标

如果输入框x中没有可用值隐藏
当输入框中的值可用并将输出框聚焦时，我们需要隐藏x图标并将焦点放在我们需要再次显示x图标的位置。

当我们在输入框中添加<span ng-show="name && count" ng-click="name=''" style="position: absolute;left: 203px;cursor;pointer;">X</span> Name: <input ng-model="name" ng-focus="count = !count" ng-init="count=false" > <p>{{count}}</p>（焦点我需要隐藏x，如果输入有值）时，我的期望将会失败。

CODE：

{{1}}

任何人请帮助我解决这个问题

Answer 1

jsfiddle有问题。下面的代码段（从您的问题粘贴的副本）运行正常。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name="";
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

<span ng-show="name && count" ng-click="name=''" style="position: absolute;left: 203px;">X</span>

Name: <input ng-model="name" ng-focus="count = !count" ng-init="count=false" ng-blur="count = !count">

<p>{{count}}</p>
</div>

Answer 2

<span ng-show="name && count" ng-click="name=''" 
style="position:absolute;left: 203px;cursor;pointer;">
   X
</span>

Name: <input ng-model="name" ng-focus="count = !count" ng-blur="count!=count" ng-init="count=false" >
<p>{{count}}</p>

Answer 3

点击事件会在模糊之后触发，因此列表会在您点击之前被隐藏。简单的解决方案是使用 mousedown 事件而不是点击：

<div ng-app="myApp" ng-controller="myCtrl">

<span ng-show="name && count" ng-click="name=''" ng-mousedown="name=''" style="position: absolute;left: 203px;">X</span>

Name: <input ng-model="name" ng-focus="count = !count" ng-init="count=false" ng-blur="count = !count">

<p>{{count}}</p>

使用angularjs清除x图标焦点问题

3 个答案: