Как добавить значок в текстовое поле, не касаясь кода css? - PullRequest
1 голос
/ 23 января 2020

Я хочу добавить флажок в поле имени пользователя и сделать так, чтобы он появлялся, когда имя пользователя не занято, и второй (значок предупреждения или что-то в этом роде), который появляется, когда имя пользователя занято. Я не хочу трогать код css.

HTML:

 <div class="form-group" id="username-group">
        <label><%= l('Username') %></label>
        <%= text_field 'username', rel => 'username', class => 'form-control',
            required => undef, pattern => "[a-zA-Z0-9._]{4,15}" %>
        <div class="valid-feedback" id="username-check-taken"
             style="display:none;"><%= l("Username is already in use.") %></div>
        <div class="form-control-feedback" style="display:none;"
             ><%= l("Can contain alphanumeric characters, _, " .
             ". and the length must be between 4 and 15 characters") %></div>

Ответы [ 3 ]

1 голос
/ 23 января 2020

Если вы можете использовать JavaScript, возможно, этот небольшой код поможет вам:

$("#myInput").on("keyup", function(e) {
let username = $(this).val();
let wariningIconUrl = 'http://www.pngall.com/wp-content/uploads/2017/05/Alert-Download-PNG.png';
let checkIconUrl = 'https://img.favpng.com/25/17/2/check-mark-computer-icons-clip-art-png-favpng-FRDM9ia5q695puSB2mSJEsSKG.jpg'
  
let imgWarn = document.createElement("img");
let imgOk = document.createElement("img");
   	let inputWidth = $(this).width();
  
$(imgWarn).attr("src",wariningIconUrl).css({"width":"13px","position":"absolute"})
  $(imgOk).attr("src",checkIconUrl).css({"width":"13px","position":"absolute"})
  let offset = $("#myInput").offset();
  
     
  let taken = false //code to check if username is already taken (maybe ajax request if then include the bottom code in your done function of ajax)
  
  
if(taken == true){
  $(".form-group").append($(imgWarn).css("left",offset.left+inputWidth-20).css("top",offset.top+5));
} else {
  $(".form-group").append($(imgOk).css("left",offset.left+inputWidth-20).css("top",offset.top+5));
}

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" id="username-group">
    <label>Username</label>
    <input type="text" name="username" id="myInput"/>
    <div class="valid-feedback" id="username-check-taken" style="display:none;">
      Username is already in use
    </div>
    <div class="form-control-feedback" style="display:none;">
      Can contain alphanumeric characters, and the length must be between 4 and 15 characters
    </div>
</div>

Измените код в соответствии с вашими потребностями, чтобы проверить, если имя пользователя взято или нет

Удачи

1 голос
/ 23 января 2020

Попробуйте использовать пакет, который предоставит набор значков, классы которых вы можете включить в свои элементы HTML, чтобы упростить задачу. Выезд https://fonts.googleapis.com/icon?family=Material+Icons

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>

</body>
</html>
0 голосов
/ 23 января 2020

Вы можете добавить ниже html код для отображения значка предупреждения:

<span style='font-size:20px;color: red;'>&#9888;</span>

Вы можете использовать ниже html код для отображения значка успеха:

<span style='font-size:20px;color: green;'>&#10004;</span>

При использовании html сущностей вам не нужно использовать / вызывать файл шрифтов значков.

SR C: https://www.w3schools.com/charsets/ref_utf_dingbats.asp & https://www.w3schools.com/charsets/ref_utf_symbols.asp

...