我如何像iPhone那样在HTML文本输入框中放置一个清晰的按钮？-JavaScript中文网-JavaScript教程资源分享门户

在移动设备上，我们经常可以看到在文本输入框旁边放置一个清晰的按钮，用于快速地清空输入框。而在Web开发中，我们也可以利用CSS和JavaScript来实现类似的功能。

HTML代码

首先，我们需要在HTML中添加一个文本输入框和一个清除按钮，并将它们放置在一起：

<div class="input-container">
  <input type="text" id="myInput" />
  <button id="clearButton">&times;</button>
</div>

其中，×代表乘号（×），这是清除按钮通常使用的一种符号。

CSS样式

接着，我们需要为输入框和按钮设置一些CSS样式，使它们能够正确地显示在页面中：

-- -------------------- ---- -------
---------------- -
  --------- ---------
-

-------- -
  -------------- -----
-

------------ -
  --------- ---------
  ---- ----
  ------ ----
  ---------- -----------------
  ------ -----
  ------- -----
  ------- -----
  ----------------- ------------
-

这段CSS代码的作用如下：

position: relative：将父元素设为相对定位，以便子元素能够使用绝对定位。
padding-right: 32px：为输入框设置右内边距，以便清除按钮有足够的空间。
position: absolute：将清除按钮设为绝对定位，以便它可以放置在输入框旁边。
top: 50%和transform: translateY(-50%)：将按钮垂直居中对齐。
right: 8px：将按钮放置在输入框右侧，距离输入框8像素的位置。
width: 24px和height: 24px：设置按钮的宽度和高度。
border: none：去掉按钮的边框。
background-color: transparent：将按钮的背景色设为透明。

JavaScript代码

最后，我们需要添加一些JavaScript代码，使清除按钮能够实现清空输入框的功能：

const myInput = document.getElementById("myInput");
const clearButton = document.getElementById("clearButton");

clearButton.addEventListener("click", () => {
  myInput.value = "";
});

这段JavaScript代码的作用如下：

document.getElementById("myInput")：获取ID为myInput的输入框元素。
document.getElementById("clearButton")：获取ID为clearButton的清除按钮元素。
clearButton.addEventListener("click", ...)：为清除按钮添加一个点击事件监听器。
myInput.value = ""：将输入框的值设为空字符串，实现清空输入框的功能。

示例代码

完整的HTML、CSS和JavaScript代码如下所示：

-- -------------------- ---- -------
--------- -----
------
  ------
    ----- --------------- --
    --------------------
    -------
      ---------------- -
        --------- ---------
      -

      -------- -
        -------------- -----
      -

      ------------ -
        --------- ---------
        ---- ----
        ------ ----
        ---------- -----------------
        ------ -----
        ------- -----
        ------- -----
        ----------------- ------------
      -
    --------
  -------

  ------
    ---- ------------------------
      ------ ----------- ------------ --
      ------- ---------------------------------
    ------

    --------
      ----- ------- - -----------------------------------
      ----- ----------- - ---------------------------------------

      ------------------------------------- -- -- -
        ------------- - ---
      ---
    ---------
  -------
-------

总结

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/11156