javascript - 使用 CSS 内容属性与 JavaScript

Question

我正在创建根据内容显示不同注释的输入。首先，我尝试使用 CSS 的 content 属性，但它只适用于 :before 和 :after 选择器。

因此，我创建了另一个 div 元素，在其上使用 :before 来显示注释文本。我应该改用 JavaScript 来执行此操作吗？

JS Fiddle

HTML:

<div class="link-input-container">
  <input class="link-input" placeholder="Zalijepi link ovdje..." type="text" class="url_input" name="url_input">
</div>
<div class="link-note no-input">
  <div class="link-note-content">
  </div>
</div>

CSS:

.link-input-container {
  position: relative;
  display: inline-block;
}

.link-input-container::after {
  display: block;
  content: "";
  width: 14px;
  height: 14px;
  background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAACT0lEQVRIS8WVS2sTURTHf2N8JMG2iK/WUt+LWpSilFIV9BPoByh059qNghsxtRtBcevCreAHqJ9AQQ0hVIqvitpqk2mrzUOrJK2JuXKGudNk5s60m+DAZTJzz/n/zuOeiUWbL6vN+vxfgE3yUi+VJ1FZbmQTmoE4WjCp4HIYZDM2RoB27Dl/lsXnLzFBPJuxURYfPTbaSOYBgHbsPjfiVWbpRbpFoFmcchlVKuO30c4BwAJJ1T0yHCj7UjrjQNyoJnvGRqFUQhVL64GkMxyg0qJpymDcgtT+4aEA5Fsm67wTcVUsogpFz0b2FNzupTLe7BjWAweyb+hMABI70Y8qFGgsF7y979kpo7ixB9rLJulA9p4ejJzF5VfToeKRANnUkD2Dp4yQwvTrSPENAWIgTd99csAIKL55F2iq3zDyUyHi0tC17FRomUrvZyIhoQAtXrcXqNu2A1CmwQHKHz6GQowALV7L29RyeS/6n58+O7+7jh8LZCR7/hkw9sATz+WpzefWxWfnnIa6Tqmuo0eCkNm5zQ9a5+FDnsDKl68tp0Wfrigb7Rw5aB0H+/g1n+MvTPRRcaLXV45kKga3tI1piv0lEtgWYCuwbYbEzU6sGz9Q9wao3nf72xyQekvi2i6s6yuou/1U7wB1oObeG3Iumh1EfDuwE+gA4s+IX73A6kMg5sLFXpYcKFmNp8SvXGT1gStcBX6764/s+wESfQJIAjvcbES8GaCr5ABAKugsiX4NqAACkucWgC6ZZKKXLpuO3H9yvEzcjASkwXJv/5/+P/1hAyh9doPuAAAAAElFTkSuQmCC') no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 50%;
  right: -5px;
  transform: translateY(-50%) translateX(100%);
}

.link-input-container.valid::after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAACHklEQVRIS+2Vv27TQBzHv2fT4PhPUjEg0Y6deACmdiviBViZoM/A2padN6Bdu/EASNnIwBMwdQApiCFVqGM7dl370PfqS8+xm0RU3TjpJzun8+fzu9/v7Ag88BAPzMd/garw2y+7W8LGSBbYPn01/GWW/d4l0vCd5zs4/36ORcm9BCY8yzOkeYrxj3FN8s+CNrguDSUn+0PFbgiW1VMDTHh6larMhbhBES4gjj/tfz1qCFbV02woaz7LZkizFLCgBBc/L2rwmkDDN59tout04Tpuo2lmAsksQZImCiwsgclo0oDXBO8Gu5JwKSVkKeF2XXiuN5eoxTZGzDyOY8RJrMCMy9+XrfCa4GCwdyQhD3tPeyjLUkl8z4fv+0rCQXg0jTCNp/PMo3F0J7zRAy3xnnhKwAiCAEEvUIIwDDENb+HJn2QpvPUUaYnTc+aSfr8PCYlwEt401BLIomwlvFXASS3puB3IQqq+6MGm5lm+FvxOgSmxN2xAQkkIL66LteFLBaaEJZlLjJdonf+SVZ8KcTDYO+TpUjCJDycvh8cLYF2/2zoaC0wB7y0AjwBsVFebc28+v3hfSEucvf720XiWQEZZRQHgGkBeXTkvTQHhHQA+AJ5LpxJRokTVt4vPmHCCGQTPAERVXFG8KGD2XQAugMfGLkyB3oTOXguYfQYgqUT8XRPopjNTHbpsvLb1y9wJ7ynTYtWTVU1e56AsXfMXq50xKBJ0RMMAAAAASUVORK5CYII=')
}

.link-input {
  font-family: Courier New;
  font-size: 12px;
}

.link-input-container.valid .link-input {
  color: green;
}

.link-input-container:not(valid) .link-input {
  color: red;
}

.link-note {
  font-size: 12px;
}

.link-note.no-input {
  color: rgb(193, 162, 0);
}

.link-note.no-input .link-note-content:before {
  content: "*Link nije unesen";
}

.link-note.valid {
  color: green;
}

.link-note.valid .link-note-content:before {
  content: "*Stisni enter da dodas ovaj link";
}

.link-note.invalid {
  color: red;
}

.link-note.invalid .link-note-content:before {
  content: "*Link nije ispravan";
}

JS:

function toggleClass(elem, class_name, class_on) {
  if (class_on) {
    elem.classList.add(class_name);
  } else {
    elem.classList.remove(class_name);
  }
}

function switchClass(elem, class_list, on_class) {
  for (var i = 0; i < class_list.length; i++) {
    elem.classList.remove(class_list[i]);
  }
  elem.classList.add(on_class);
}

function LinkInput() {
  LinkInput = null;

  var self = {
    container_elem: null,
    input_elem: null,
    note_elem: null,

    init: () => {
      var container_elem = self.container_elem = document.querySelector(
        '.link-input-container'
      );

      var input_elem = self.input_elem = document.querySelector(
        '.link-input'
      );
      input_elem.size = 23;

      var note_elem = self.note_elem = document.querySelector(
        '.link-note'
      );

      input_elem.addEventListener('input', (ev) => {
        var new_val = input_elem.value;

        var new_size = new_val.length;
        input_elem.size = Math.max(new_size + 2, 23);

        if (new_val.length > 5) {
          switchClass(note_elem, [
            "no-input", "invalid", "valid"
          ], "valid");

          toggleClass(container_elem, "valid", true);
        } else {
          if (new_val === "") {
            switchClass(note_elem, [
              "no-input", "invalid", "valid"
            ], "no-input");
          } else {
            switchClass(note_elem, [
              "no-input", "invalid", "valid"
            ], "invalid");
          }

          toggleClass(container_elem, "valid", false);
        }
      });

      input_elem.addEventListener('keyup', (ev) => {
        if (ev.keyCode == 13) {
          input_elem.value = "";
          input_elem.blur();

          // Submit

          return false;
        }
      });
    },
  };

  self.init();
  return self;
}

var link_input = LinkInput();

Answer 1

这取决于你。我认为通知应该由 javascript 驱动，因为它在加载时不是网站的一部分。我在这里考虑一些 SEO，而不是搜索引擎无论如何都应该保存这样的通知。嗯，这就是我的意见 :)

干杯!