Question

我正在尝试让多个onfocus事件发生，但我似乎无法让它工作。只有第一个被选中。

div#cloud {
  width: 100px;
  height: 100px;
  border-radius: 20px;
  border: 1px solid black;
  line-height: 100px;
  text-align: center;
}
div#cloud:hover {
  background-color: green;
  color: white;
}
div.container {
  width: 100%;
  height: 200px;
  background: #ccc;
  display: none;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  line-height: 200px;
}

.active {
  background-color: green;
  color: white;
}

脚本位于head标签之间，需要保留在那里。我确信我只是错过了一些简单的东西，但似乎简单的事情总是最难弄清楚的！

Answer 1

正在执行这两项功能。您实际上需要使用

将值分配回输入

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

＆＃13;

function myFunction1(x) {
    x.style.background = "lightblue" 
} 

function myFunction2(x) {
    x.value = x.value.toUpperCase();
}

＆＃13;

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

＆＃13;

但通常情况下，我会为此添加事件处理程序。 here

Answer 2

使用addEventListener代替使用非限制性内联事件处理程序，您可以在同一元素上为同一类型的事件添加多个侦听器，并分离关注点（html和js）

示例用法

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

Answer 3

它正在工作，第二个功能就是不返回/记录任何内容。

使用onkeyup事件：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

您的问题在这一行：

x.value.toUpperCase();

将该行更改为：

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

您需要将 toUpperCase（）的结果分配给元素。

＆＃13;

function myFunction1(x) {
    x.style.background = "lightblue"
}

function myFunction2(x) {
    x.value = x.value.toUpperCase();
}

＆＃13;

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

＆＃13;

您也可以考虑使用这三个事件：

的onfocus
的onblur
的onkeyup

＆＃13;

function myFunction1(x) {
  x.style.background = "lightblue"
}

function myFunction2(x) {
  x.value = x.value.toUpperCase();
}

function myFunction3(x) {
  x.style.background = "inherit"
}

＆＃13;

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

＆＃13;

Answer 5

嗯，您始终可以将它们合并为一个事件侦听器。这样你就不会使用内嵌j混乱你的html，只需在addEventListener的回调块中添加另一个函数，就可以轻松扩展你的焦点处理。

＆＃13;

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);
});

＆＃13;

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

＆＃13;

如果您确实想将input值更改为大写字母，则需要更改此行

x.value.toUpperCase();

像这样

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

如果您想在键入字母时自动将字母转换为大写字母，那么您可以使用input事件类型代替focus这样的第二个函数。

＆＃13;

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);
});

＆＃13;

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

＆＃13;

尝试分配多个onfocus事件

5 个答案: