时间戳

首页 > 解决方案 > 将内容添加到输入：在 css 聚焦之前

javascript - 将内容添加到输入：在 css 聚焦之前

问题描述

对于输入字段，在焦点上，输入字段应显示“+91”作为静态部分。我成功地替换了占位符 onFocus & onBlur 活动。我无法添加侦听器以从 :before 读取内容

<div class="goal-mobile">
  <input id="mobileField" onblur="this.placeholder = 'Enter your mobile number'" onfocus="this.placeholder = ''" type="tel" class="input-mobile"/>
</div>

.goal-mobile{
    position: relative;
    &:before{
        content: "+91";
        position: absolute;
        left: 20px;
        top: 20px;
        color: rgba(3,3,3,.6);
    }
}

上面的类默认加载“+91”，需要在焦点上加载到我尝试使用:focus::before{}的输入字段但是没有用我可以用什么来实现onFocus默认静态显示“ +91" 在输入框中？

PS：实现 jQuery 并不容易，因为我使用的是 Vue JS 框架

标签： javascripthtmlcssvue.js

解决方案

就像@connexo 对您的问题发表的评论一样，您将无法直接从 javascript 访问 ::before 和 ::after 的内容。

但是，您可以要求 css 从元素的属性中加载内容并在 javascript 中操作该属性。

在您的 div 中添加一个新属性。我将data-num为此示例调用它：

<div class="goal-mobile" data-num="">
  <input id="mobileField" type="tel" class="input-mobile"/>
</div>

然后在css中，使用attr()函数填充内容：

.goal-mobile{
  position: relative;
}

.goal-mobile:before {
  content: attr(data-num);
  position: absolute;
  left: 20px;
  top: 20px;
  color: rgba(3,3,3,.6);
}

现在您可以在 js 中为该内容设置您想要的任何字符串：

const $mobile = document.querySelector('.goal-mobile');
const $mobileInput = document.querySelector('.goal-mobile input');

const phoneNum = '+91';

$mobileInput.onfocus = () => {
  $mobile.setAttribute('data-num', phoneNum);
}

$mobileInput.onblur = () => {
  $mobile.setAttribute('data-num', '');
}

这是一个小提琴

除了 之外，您将无法使用attr()其他任何东西content，但它的支持非常好：caniuse: attr()

请注意，即使它有效，但这可能不是实现您想要的最佳方式 - 您可以使用真实元素轻松完成此操作。

推荐阅读