如何使用javascript将输入集中在范围滑块上？

问题描述

我输入的内容可以直接输入值，也可以使用范围滑块选择。我想要的是，当用户选择范围滑块时，它会同时控制其控制的输入。

所以我有这些输入：

$server = "152.306.2.20"
$port1 = 443
$port2 = 222
$user = Read-Host -Prompt 'Enter your username'
Write-Host "Trying $port1 ..."
$connection = New-Object System.Net.sockets.TcpClient ($server,$port1)
if ($connection.Connected) {
    Write-Host "Port 222 available,establishing SSH connection with xrdp tunnel"
start-process -NoNewWindow ssh.exe -ArgumentList "-p $port1",'-Nf',"-l $user",'-L 3929:127.0.0.1:3929',"$server"
Start-Sleep -s 10
Write-Host "opening remote desktop on localhost:3929"
Start-Sleep -s 2
start-process mstsc.exe -ArgumentList "/v:127.0.0.1:3929"
}
else {
Write-Host "Port 222 unavailable,establishing SSH connection with xrdp tunnel on alternate port"
start-process -NoNewWindow ssh.exe -ArgumentList "-p $port2","$server"
Start-Sleep -s 10
Write-Host "opening remote desktop on localhost:3929"
Start-Sleep -s 2
start-process mstsc.exe -ArgumentList "/v:127.0.0.1:3929"
}

这个使范围滑块的值进入输入的js：

<label class="va1">Option a price 1:<input id="a1" type="number"/></label>
<input type="range" id="slider-a1" min="0" max="100" step="1" value="0"><br>

有没有一种方法可以使输入焦点/焦点不在范围滑块上？

解决方法

不，您不能，因为那样只会将光标移到输入字段中，而滑块将失去焦点，这就是焦点，您不能同时关注两个项目：

示例：

var opt_1 = document.getElementById("slider-a1");
opt_1.oninput = function() {
  document.getElementById("a1").value = opt_1.value;
  document.getElementById("a1").focus();
  }

.active  {
  border-color:red;
  border-style: inset;
  border-width: 1px;}

<label class="va1">Option a price 1:<input id="a1" type="number"/></label>
<input type="range" id="slider-a1" min="0" max="100" step="1" value="0"><br>

所以我建议模仿重点：

var opt_1 = document.getElementById("slider-a1");
opt_1.oninput = function() {
  document.getElementById("a1").value = opt_1.value;
  document.getElementById("a1").classList.add("active");
  }

.active  {
  border-color:blue;
  border-style: inset;
  border-width: 2px;}

<label class="va1">Option a price 1:<input id="a1" type="number"/></label>
<input type="range" id="slider-a1" min="0" max="100" step="1" value="0"><br>

编辑：

如果您的输入计算受焦点控制（顺便说一句，它们可以进行更改，但根据我的了解，我认为女巫会更理想），您可以设置单独的事件，即在滑块上的鼠标上移会触发焦点根据您的输入；

虽然您正在使用滑块，但焦点当然在滑块上，但是一旦释放它，就可以切换到输入：

示例：

var opt_1 = document.getElementById("slider-a1");
opt_1.oninput = function() {
  document.getElementById("a1").value = opt_1.value;
}

opt_1.onmouseup = function() {
  document.getElementById("a1").focus();
}

<label class="va1">Option a price 1:<input id="a1" type="number"/></label>
<input type="range" id="slider-a1" min="0" max="100" step="1" value="0"><br>

也从您评论中的其他链接中，我看到您使用的onfocusout事件很难触发，因此我建议使用模糊：

（但是如果您只是简单地使用更改...，所有这些似乎都是多余的）

var opt_1 = document.getElementById("slider-a1");
opt_1.oninput = function() {
  document.getElementById("a1").value = opt_1.value;
}


opt_1.onmouseup = function() {
  document.getElementById("a1").focus();
  setTimeout(function() {
    console.log(true)
    opt_1.focus();
  },1000);
}


document.getElementById("a1").onblur = function() {
  console.log("blur out happend")
};

<label class="va1">Option a price 1:<input id="a1" type="number"/></label>
<input type="range" id="slider-a1" min="0" max="100" step="1" value="0"><br>