Outlook如何在输入字段的末尾添加“x”？答案

【问题标题】：How Outlook add 'x' at the end of input field?Outlook如何在输入字段的末尾添加“x”？
【发布时间】：2018-08-09 04:00:32
【问题描述】：

问题

Outlook 在我输入数据并将click 事件绑定到它以清除其中的数据时，在Outlook add-in 面板的输入字段的末尾添加x。

我需要为点击事件添加逻辑，但在 DOM 中找不到 x。

环境

Windows 10
Outlook 2010（看起来与版本无关）

再现

当用户点击x时，数据将从input-field中删除，但由于角度$watch不起作用，数据将保留在$scope.email中。

我正在寻找指针：

Outlook 如何在输入字段末尾添加x？
如何处理页面中的清除事件？检查时在 DOM 中找不到这个 x？

截图

Outlook added 'x' at end of input field

【问题讨论】：

您的问题应该包含 angularjs 标签。这是输入和按钮字段添加到一个具有输入样式的 div。如果您想在模板中单击按钮，请将 ng-click 添加到按钮 ng-click="myfunction()"> 并在指令中创建 $scope.myfunction()。
感谢@ambussh，我尝试在输入字段和 div 中添加 ng-click 功能，但是当用户输入文件和输入文件中存在的任何值被聚焦但当我单击“时，Outlook 添加“x” x' 在附加 ng-click 事件之后然后 myfunction() 未执行
我尝试加载任何其他网站而不是我的页面，然后Outlook 在每个字段中添加相同的 'x'
如果你不给我们看一些代码，我们只能猜测

标签： angularjs outlook outlook-addin office-js

【解决方案1】：

在模板中添加：

<div class="input-new">
  <input ng-model="textValue" ng-focus="isFocused=true" ng-blur="blur()" /> 
  <button ng-show="isFocused && textValue.length > 0" ng-click="cleanText()">X</button>
</div>

在控制器中添加：

$scope.isFocused = false;
$scope.textValue = "";

$scope.cleanText = function() {
   $scope.textValue = "";
}

$scope.blur = function() {
    $timeout( function(){
        $scope.isFocused = false;
    }, 200 ); 
}

当然你必须为输入框和div框添加样式。

Workin example in plunker

【讨论】：

谢谢@ambussh 我在 Chrome 和其他浏览器上尝试了您的解决方案，发现您手动添加的“x”在 Chrome 中运行良好，但在 IE 中显示两个十字。如果我使用您的 IE 浏览器交叉，则范围内的 textValue 的值不会更新。
因为IE默认添加了自己的X。您可以禁用对 MS 浏览器按钮的支持或禁用它们的按钮。 .input-new input::-ms-clear { display: none; } 。显示代码，因为我不知道为什么它在您的应用程序中不起作用。我准备的示例适用于 Chrome、Safari、Edge 和 IE。 Example with disabled IE and Edge input cross

【解决方案2】：

OfficeuifTextfield指令使得当用户点击"X"右侧的输入字段时清除其值，它反映在绑定到它的模型中

app.directive('uifTextfield', function() {
    return {
        restrict: 'E',
        require: ['uifTextfield', '?ngModel'],
        link: function(scope, elem, attr, ctrl) {
            $(elem).find("input").bind("mouseup", function(event) {
                var $inputElement = $(this);
                if ($inputElement.val()) {
                    setTimeout(function() {
                        if (!$inputElement.val()) {
                            angular.element($inputElement).controller('ngModel').$setViewValue('');
                        }
                    }, 1);
                }
            });
        }
    };
});

【讨论】：