如何使用 Angular 5 和引导程序放置 x 按钮以清除输入字段中的内容

Posted 2023-03-05

【中文标题】如何使用 Angular 5 和引导程序放置 x 按钮以清除输入字段中的内容

【英文标题】：How to put x button to clear content in input field using angular 5 and bootstrap

【发布时间】：2019-05-12 22:52:30

【问题描述】：

我正在尝试使用 Angular 5 和引导程序在输入字段中放置一个“x”按钮，但没有成功。

通过单击“x”按钮，该输入字段中的内容应被清除

我尝试过使用

<input type="search" id = "search">

在 CSS 中：

 input[type="search"]::-webkit-search-cancel-button 
-webkit-appearance: searchfield-cancel-button;

input[type="search"]::-ms-clear 
  color: red;

但是，我对此实现有疑问，因为 webkit-apperance 与 IE11 存在兼容性问题（即使 firefox 也不支持它）并且没有显示“x”。

谁能帮我看看Angular 5/6/7和Bootstrap 4是否有任何解决方案。

我有一个使用 Jquery 和 javascript 的解决方案 https://codepen.io/frosdqy/pen/grbxGW

但正在寻找纯打字​​稿（Angular）或引导解决方案。

如果有人可以帮助 angular5，那将是一个很大的帮助！

【问题讨论】：

不太清楚我是否理解。你只使用引导 css 吗？因为它们的一些组件无论如何都依赖于 jquery，因此您可能已经将它包含在您的项目中？或者，如果您想要一个“角度”解决方案，只需使用该示例的样式并替换 X 上的 jquery 点击处理程序，而是像 (click)="document.getElementById('search').value=''" 一样执行操作，您就完成了。除非你试图制作一个完整的可重用组件或其他东西？ :)

【参考方案1】：

我发现一个问题似乎可以解决与您的问题类似的问题： Position clear button in bootstrap input field

【讨论】：

@user3854185 我的回答对你有帮助吗？

嗨，迪伦，在某种程度上是的。它有助于固定位置。但是，我正在寻找绑定与之关联的按键事件。

【参考方案2】：

这都是关于幻觉的。你创建一个div。在该 div 中创建一个输入和带有 x 的按钮。设置输入背景透明和边框0。你会看到它。

【讨论】：

我使用了这种方法。背景透明在 IE 中使用 input[type="search"]::-ms-clear color: red;