Попытка назначить несколько событий onfocus

Question

Я пытаюсь добиться нескольких событий onfocus, но я просто не могу заставить его работать.Только первое подобрано.

<script>
function myFunction1(x) {
    x.style.background = "lightblue" 
} 

function myFunction2(x) {
    x.value.toUpperCase();
}
</script>

Enter your name: <input type="text" onfocus="myFunction1(this);myFunction2(this)">

Скрипт находится между тегами заголовка и должен оставаться там.Я уверен, что мне просто не хватает чего-то простого, но кажется, что простые вещи всегда сложнее понять!

Answer 1

Ну, вы всегда можете объединить их в один приемник событий.Таким образом, вы не загромождаете свой html встроенными js и можете легко расширить обработку фокуса, просто добавив другую функцию в блок обратного вызова addEventListener.

function myFunction1(x) {
  console.log('fn1 running');
  x.style.background = "lightblue"
}

function myFunction2(x) {
  console.log('fn2 running');
  x.value.toUpperCase();
}

const inp = document.querySelector('input');
inp.addEventListener('focus', function() {
  myFunction1(this);
  myFunction2(this);
});

Enter your name: <input type="text">

И если вы действительно хотите изменить значение input на заглавные буквы, вам нужно изменить эту строку

x.value.toUpperCase();

как это

x.value = x.value.toUpperCase();

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

function myFunction1(x) {
  console.log('fn1 running');
  x.style.background = "lightblue"
}

function myFunction2(x) {
  x.value = x.value.toUpperCase();
}

const inp = document.querySelector('input');
inp.addEventListener('focus', function() {
  myFunction1(this);
});
inp.addEventListener('input', function() {
  myFunction2(this);
});

Enter your name: <input type="text">

Answer 2

Обе функции выполняются.Вам действительно нужно присвоить значение обратно для ввода с помощью

 x.value = x.value.toUpperCase();

function myFunction1(x) {
    x.style.background = "lightblue" 
} 

function myFunction2(x) {
    x.value = x.value.toUpperCase();
}

Enter your name: <input type="text" onfocus="myFunction2(this);myFunction1(this)">

Но обычно я бы сделал, добавив обработчики событий для этого. здесь

Answer 3

Работает, вторая функция просто ничего не возвращает / не регистрирует.

Используйте событие onkeyup:

function myFunction1(x) {
  x.style.background = "lightblue"
}

function myFunction2(x) {
  x.value = x.value.toUpperCase()
}

<input type="text" onfocus="myFunction1(this)" onkeyup="myFunction2(this)">

Answer 4

Ваша проблема в этой строке:

x.value.toUpperCase();

Измените эту строку на:

x.value = x.value.toUpperCase();

Вам необходимо присвоить результат toUpperCase () дляэлемент.

function myFunction1(x) {
    x.style.background = "lightblue"
}

function myFunction2(x) {
    x.value = x.value.toUpperCase();
}

Enter your name: <input type="text" onfocus="myFunction1(this);myFunction2(this)">

Вы также можете использовать три события:

• onfocus
• onblur
• onkeyup

function myFunction1(x) {
  x.style.background = "lightblue"
}

function myFunction2(x) {
  x.value = x.value.toUpperCase();
}

function myFunction3(x) {
  x.style.background = "inherit"
}

Enter your name: <input type="text" onfocus="myFunction1(this)" onblur="myFunction3(this)" onkeyup="myFunction2(this)">

Answer 5

Вместо использования очень ограничивающих встроенных обработчиков событий используйте addEventListener , чтобы вы могли добавить несколько прослушивателей для одного и того же элемента для одного и того же типа события и разделить задачи (html и js)

пример использования

let myElem = document.querySelector(".my-elem");
myElem.addEventListener("focus", (ev) => { // one handler });
myElem.addEventListener("focus", (ev) => { // another handler });