当不为空时在TextField中显示图标

是一种常见的用户界面设计技巧，用于提醒用户输入框中是否有有效的内容。通常情况下，我们可以使用一个小图标来表示输入框中的内容是否为空。

在前端开发中，可以通过以下步骤实现这个功能：

首先，我们需要在HTML中创建一个TextField输入框，并为其添加一个图标元素。可以使用HTML的<input>标签或者一些UI库（如Bootstrap、Ant Design等）中的组件来创建输入框。
接下来，我们可以使用CSS来定义图标的样式。可以通过设置图标元素的背景图片、字体图标或者SVG图标来实现。可以使用CSS的background-image属性、font-family属性或者<svg>标签来设置图标。
在JavaScript中，我们可以监听输入框的输入事件（如input事件、change事件等），并根据输入框中的内容是否为空来切换图标的显示状态。可以使用JavaScript的DOM操作方法（如querySelector、classList等）来获取和修改图标元素的属性。

以下是一个示例代码：

HTML:

<div class="text-field">
  <input type="text" id="my-input">
  <span class="icon"></span>
</div>

CSS:

.text-field {
  position: relative;
}

.icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-image: url('icon.png');
  background-size: cover;
  /* 其他样式属性 */
}

JavaScript:

const input = document.getElementById('my-input');
const icon = document.querySelector('.icon');

input.addEventListener('input', function() {
  if (input.value.trim() !== '') {
    icon.style.display = 'block';
  } else {
    icon.style.display = 'none';
  }
});

在这个示例中，我们创建了一个包含输入框和图标的容器，并使用CSS将图标定位到输入框的右侧。然后，通过JavaScript监听输入框的输入事件，根据输入框中的内容是否为空来切换图标的显示状态。

对于腾讯云相关产品和产品介绍链接地址，由于不能提及具体的品牌商，建议您访问腾讯云官方网站（https://cloud.tencent.com/）了解他们的云计算产品和服务。