Лучший доступный способ показать значение по умолчанию для поля формы

Question

Какой лучший / рекомендуемый способ указать, что поле формы будет иметь определенное значение по умолчанию, если вы его не заполняете? Я особенно думаю о полях, которые динамически c основаны на других полях, и хочу, чтобы они были правильно доступны.

Подумайте о URL-адресе. Если при создании учетной записи вы заполните поле, то ничего страшного. Если вы этого не сделаете, значение будет создано на основе вашего имени пользователя. Но оно не будет таким же, как ваше имя пользователя, только что сгенерированное из него.

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

I ' m не уверен, работает ли здесь текст-заполнитель, но я полагаю, что нет. Я мог бы aria-labelledby указать на что-то, что гласит: «Значение по умолчанию: xyz», но я не уверен, сработает ли это или насколько хорошо это будет пониматься программами чтения с экрана - особенно, если оно меняется автоматически.

Ура

Answer 1

Лучший способ сделать это - заполнить ввод и показать тот факт, что он был автоматически заполнен через метку, как дополнительный бит информации.

Ярлыки на входах считываются, когда вы фокусируетесь на соответствующем input.

По этой причине мы можем генерировать метки «на лету», чтобы содержать все, что мы хотим.

Таким образом, лучшим вариантом здесь было бы создание метки на blur первый ввод, от которого зависит второй ввод.

Внутри метки мы добавляем инструкции, объясняющие, почему этот ввод уже заполнен.

Затем мы автоматически заполняем второй ввод на основе ввода первый.

В приведенном ниже примере я добавил «URL» к первому входному значению, чтобы имитировать какое-то преобразование от имени пользователя к URL-адресу.

Я также убираю объяснение в скобках если пользователь изменил второе входное значение.

$('#iUsername, #iUserURL').on('blur', function(){
  var ElUserName = $('#iUsername');
  var ElUserURL = $('#iUserURL');
  
  if(ElUserURL.val() == ""){
  
    ElUserURL.val(ElUserName.val() + "URL");
      $('label[for="iUserURL"]').text("user url (you can change this if you want, we have set it as " + $('#iUsername').val() + "URL)");
      
    }else if(ElUserURL.val() != ElUserName.val() + "URL"){  
        $('label[for="iUserURL"]').text("user url");
        
    }
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="iUsername">User Name</label><br/>
<input id="iUsername" /><br/>
<hr/>
<label for="iUserURL">User URL</label><br/>
<input id="iUserURL" /><br/>
<hr/>
<label for="itest">I have added this third input just so you have something to tab too, it does not add anything to the fiddle</label><br/>
<input id="itest" />