JS防止焦点上闪烁的输入边框

Question

我正在尝试建立一个自定义输入数字。我唯一的问题是，当我多次单击按钮（递增）时，输入边框出现了闪烁。

const input = document.querySelector('input');
document.querySelector('button').addEventListener('click', () => {
	input.focus();
	const value = input.value ? parseFloat(input.value) : 0;
	input.value = value + 1;
})

body {
	margin: 50px;
}

* {
	box-sizing: border-box;
}

input:focus {
	border: 1px solid red;
	outline: none;
}

<input type="text">

<button>Increment</button>

有办法解决吗？

Answer 1

问题是您的按钮在单击时会获得焦点。为防止这种情况发生，您可以拦截按钮上的mousedown事件并调用preventDefault()。

但是，像这样强制聚焦是一件很奇怪的事情，最好避免。

const input = document.querySelector('input');

const buttonEl = document.querySelector('button');
buttonEl.addEventListener('mousedown', ev => ev.preventDefault()) 
buttonEl.addEventListener('click', () => {
	input.focus();
	const value = input.value ? parseFloat(input.value) : 0;
	input.value = value + 1;
})

body {
	margin: 50px;
}

* {
	box-sizing: border-box;
}

input:focus, input:active {
	border: 1px solid red;
	outline: none;
}

<input type="text">

<button>Increment</button>

Answer 2

如果反转元素，则可以在按下按钮的同时使用相邻的兄弟选择器button:active + input选择输入样式。但是，要重新对齐，您将需要使用容器和网格（或者我敢肯定您可以使用flex或仅将其浮动）

CSS网格：https://developer.mozilla.org/en-US/docs/Web/CSS/grid

相邻的同级选择器：https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator

const input = document.querySelector('input');
document.querySelector('button').addEventListener('click', () => {
	input.focus();
	const value = input.value ? parseFloat(input.value) : 0;
	input.value = value + 1;
})

body {
	margin: 50px;
}

* {
	box-sizing: border-box;
}

button:active + input, 
input:focus {
	border: 1px solid red;
	outline: none;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.container input {
  order: 1;
}
.container button {
  order: 2;
}

<div class='container'>
  <button>Increment</button>
  <input type="text">
</div>

Answer 3

const input = document.querySelector('input');
document.querySelector('button').addEventListener('click', () => {
	input.focus();
	const value = input.value ? parseFloat(input.value) : 0;
	input.value = value + 1;
})

body {
	margin: 50px;
}

* {
	box-sizing: border-box;
}

input {
  border: 1px solid red;
	outline: none;
}

input:focus {
	border: 1px solid red;
	outline: none;
}

<input type="text">

<button>Increment</button>

Answer 4

只需更改border和padding进行输入

const input = document.querySelector('input');
document.querySelector('button').addEventListener('click', () => {
	input.focus();
	const value = input.value ? parseFloat(input.value) : 0;
	input.value = value + 1;
})

body {
	margin: 50px;
}

* {
	box-sizing: border-box;
}

input {
  border:1px solid #777777;
  padding:2px 0px;
}


input:focus {
  border:1px solid red;
  outline: none;
}

<input type="text">

<button>Increment</button>