Автоматическое изменение размера текстового элемента не работает с keyup - PullRequest
Новая
       30

Автоматическое изменение размера текстового элемента не работает с keyup

1 голос
/ 29 марта 2019

В моем ниже jQuery у меня есть элемент, который отражает написанное input внутри вторичного элемента. В то же время необходимо изменить размер элемента с отображаемым текстом, это работает, но есть две проблемы, которые я не могу решить:

1. Удерживая клавишу Backspace, она не идет в ногу.
2. Когда вы нажимаете одну клавишу возврата, он пропускает символ и поле не может быть очищено.

Пожалуйста, смотрите ниже фрагмент: 

jQuery(document).ready( function() {
    jQuery(function(){
        jQuery('#vanity-span').text(jQuery('#reflection').val());
        jQuery('#reflection').width(jQuery('span').width());
    }).on('input', function () {
        jQuery('#vanity-span').text(jQuery('#reflection').val());
        jQuery('#reflection').width(jQuery('span').width());
    });
    jQuery('#vanity-url').bind('keypress keyup blur', function() {
        jQuery('#reflection').val(jQuery(this).val());
    });
});
body {
  background-color: #e4e4e4;
  font-family: Arial;
}

#vanity-url-wrapper {
  margin-top: 3em;
  text-align: center;
}

#vanity-url-wrapper > span {
  background-color: #FBE3CF;
  border-radius: 8px;
  padding: 0.5em 0;
  border: 2px solid orange;
}

.pre-span {
  background-color: orange;
  color: white;
  font-weight: bold;
  padding: 0.5em;
}

#vanity-url {
  display: block;
  text-align: center;
  width: 12em;
  margin: 3em auto;
  font-size: 1.2em;
  border-radius: 5px;
  border: 2px solid orange;
  padding: 0.5em;
}

#vanity-span{
  padding: 0.5em;
}

#reflection {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
  <div id="vanity-url-wrapper">
    <span>
      <span class="pre-span">https://example.com/</span>   
      <span id="vanity-span"></span>
      <input id="reflection" type="text" readonly>
      <span class="pre-span">/</span>
    </span>
  </div>
  <input id="vanity-url" type="text" placeholder="Type here your vanity URL">
</body>

1 Ответ

1 голос
/ 30 марта 2019

Проблема в том, что .bind('keypress keyup blur', function() { плохо справляется с обновлением значений.Когда клавиша нажата, она нуждается в обновлении и ждет, а затем пропускает, и наоборот.

Таким образом, решение здесь заключается в использовании .on('input', function() { вместо.

См. Результат ниже: 

jQuery(document).ready( function() {
    jQuery(function(){
        jQuery('#vanity-span').text(jQuery('#reflection').val());
        jQuery('#reflection').width(jQuery('span').width());
    }).on('input', function () {
        jQuery('#vanity-span').text(jQuery('#reflection').val());
        jQuery('#reflection').width(jQuery('span').width());
    });
    jQuery('#vanity-url').on('input', function() {
        jQuery('#reflection').val(jQuery(this).val());
    });
});
body {
  background-color: #e4e4e4;
  font-family: Arial;
}

#vanity-url-wrapper {
  margin-top: 3em;
  text-align: center;
}

#vanity-url-wrapper > span {
  background-color: #FBE3CF;
  border-radius: 8px;
  padding: 0.5em 0;
  border: 2px solid orange;
}

.pre-span {
  background-color: orange;
  color: white;
  font-weight: bold;
  padding: 0.5em;
}

#vanity-url {
  display: block;
  text-align: center;
  width: 12em;
  margin: 3em auto;
  font-size: 1.2em;
  border-radius: 5px;
  border: 2px solid orange;
  padding: 0.5em;
}

#vanity-span{
  padding: 0.5em;
}

#reflection {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
  <div id="vanity-url-wrapper">
    <span>
      <span class="pre-span">https://example.com/</span>   
      <span id="vanity-span"></span>
      <input id="reflection" type="text" readonly>
      <span class="pre-span">/</span>
    </span>
  </div>
  <input id="vanity-url" type="text" placeholder="Type here your vanity URL">
</body>
...