Блог

Главная - Вопросы по программированию - Попытка изменить текст в текстовом поле при щелчке с помощью размытия

Попытка изменить текст в текстовом поле при щелчке с помощью размытия

#javascript #blur #dom-events

#javascript #размытие #dom-события

Вопрос:

Извините, если это слишком простой вопрос. Я пытаюсь изменить все экземпляры amp; на and с помощью обработчика событий blur . Кажется, я не получаю никаких изменений в blur, даже если моя функция просто

id.value = "Random test string";

итак, я предполагаю, что это проблема с самим обработчиком событий. Любая помощь была бы оценена, спасибо.

У меня есть код для изменения, amp; закомментированный, потому что я проверял, запускалась ли функция, привязанная к обработчику событий blur, вообще, чего не было. Этот код также содержит HTML-файл с текстовым полем с идентификатором textid 

  <script type="text/javascript">
    //var for saving the string
    var textvar;
    //var for the texta area
    var id = document.getElementById("textid");
    id.addEventListener("blur", function() {

        //textvar = id.value;
        //textvar = textvar.replace("amp;", " and ");
        //id.value = textvar;

        textvar = "Correct!!";
        id.value = textvar;

    }, false);
 </script>

Комментарии:

1. Это работает нормально. Вы нажимаете на входной тег, а затем нажимаете outside.

Ответ №1:

Этот код работает нормально и так, как ожидалось:

 <input type="text" id="textid" />

JS код

 //var for saving the string
var textvar;
//var for the texta area
var id = document.getElementById("textid");

id.addEventListener("blur", function() {
    textvar = id.value;
    textvar = textvar.replace(/amp;/g, " and ");
    id.value = textvar;
}, false);

Вы можете найти рабочее перо здесь

Ответ №2:

Возможно, вы захотите рассмотреть этот другой подход:

 <!DOCTYPE html>
<html>
<head>

<script type="text/javascript">
  function change(element) {
    let textvar = element.value;
    if (textvar.indexOf('amp;') !== -1) {
      textvar = textvar.replace("amp;", " and ");
    }
    element.value = textvar;
  }
</script>
</head>

<body>
    <input type="text" onblur="change(this)" />
</body>
</html>

Я надеюсь, что это может помочь.