css 如何在输入中的光标后添加样式化文本？[关闭]

3z6pesqy 于 2023-06-07 发布在其他

关注(0)|答案(1)|浏览(261)

**关闭。**此题需要debugging details。目前不接受答复。

编辑问题以包括desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将帮助其他人回答这个问题。
5天前关闭。
Improve this question
enter image description here
我想加上“. domainX.com“来输入。在每一个按键移动一个字符的域名。
我试着给它设置样式，试着使用占位符，但我无法将占位符设置为不消失。

css

来源：https://stackoverflow.com/questions/76374181/how-can-i-add-styled-text-after-cursor-in-input

1条答案

按热度按时间

vmdwslir1#

好吧，你可以用html表单做这样的事情，只要你的输入文本很短，否则它会被隔开：
所以你的html是这样的：

<form class="container">
  <input class="inputField" oninput="addChar(this.value)" />
  <label id="placeholder" class="inputLabel"><span class="hide">s</span>.domainX.com</label>
</form>

你的Javascript像这样：

function addChar(value) {
      document.getElementById("placeholder").innerHTML = `<span class="hide">s${value}</span>.domainX.com`
}

和CSS一样，你可能要调整的位置有点左上角右等取决于字体

.inputLabel {
  position: absolute;
  pointer-events: none;
}
.inputField {
  background: none;
}
.container {
  display: flex;
  flex-direction: column;
}
.hide {
  visibility: hidden;
}

这是因为输入字段允许你将输入值onchange传递给一个函数，这样函数就可以将它添加到一个隐藏的span中，作为“. www.example.com“的分隔符domainX.com，然后这个分隔符将匹配输入中文本的宽度，这样后缀就在正确的位置，样式只是将文本移动到inputField后面，这样它就可以看起来像它的一部分。希望这有帮助！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .inputLabel {
      position: absolute;
      pointer-events: none;
    }
    .inputField {
      background: none;
    }
    .container {
      display: flex;
      flex-direction: column;
    }
    .hide {
      visibility: hidden;
    }
  </style>
</head>
<body>
  <div>
    <form class="container">
      <input class="inputField" oninput="addChar(this.value)" />
      <label id="placeholder" class="inputLabel"><span class="hide">s</span>.domainX.com</label>
    </form>
  </div>
  <script>
    function addChar(value) {
      document.getElementById("placeholder").innerHTML = `<span class="hide">s${value}</span>.domainX.com`
    }
  </script>
</body>
</html>

赞(0）回复(0）举报 2023-06-07

我来回答

css 如何在输入中的光标后添加样式化文本？[关闭]

1条答案

相关问题

热门标签

最新问答