CSSのコンテンツ属性とJavaScriptの使用

Question

コンテンツに基づいて異なる注釈を示す入力を作成しています。まず、CSSのコンテンツ属性を使用しようとしましたが、セレクタの前と後にのみ機能します。

私は別の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を考えていますが、検索エンジンはそのような通知を保存する必要はありません。まあ私の意見です:)

乾杯！