Question

为什么文本字段在加载时完全为空，而与我的滑块值无关却保持为空？

子问题：是否应该链接它们？如果我在输入文本字段中输入了一个值，滑块是否应相应移动？

    var slider = document.getElementById("myRange"); 
    var output = document.getElementById("demo");
    output.innerHTML = slider.value; 
    slider.oninput = function() 
    { output.innerHTML = this.value; }

   .slidecontainer { width: 100%; } 

    .slider { -webkit-appearance: none; width: 100%; height: 25px;
    background: #d3d3d3; outline: none; opacity: 0.7;
    -webkit-transition: .2s; transition: opacity .2s; }
 
    .slider:hover { opacity: 1; } 

    .slider::-webkit-slider-thumb { -webkit-appearance: none;
    appearance: none; width: 25px; height: 25px; background:
    #4CAF50; cursor: pointer; } 

    .slider::-moz-range-thumb { width: 25px; height: 25px;
    background: #4CAF50; cursor: pointer; }

 <div class="slidecontainer"> 
    <input type="range" min="1000" max="5000000"
    value="250000" class="slider" id="myRange"> 
    <input type="text" id="demo" value=""> 
    </div>

Answer 1

使用以下代码

使用.value代替innerHTML并使用oninput="myFunction(this)"到#slide

    var slider = document.getElementById("myRange"); 
    var output = document.getElementById("demo");
    output.value = slider.value; 
    function myFunction(x) {
    output.value = x.value;
}

   .slidecontainer { width: 100%; } 

    .slider { -webkit-appearance: none; width: 100%; height: 25px;
    background: #d3d3d3; outline: none; opacity: 0.7;
    -webkit-transition: .2s; transition: opacity .2s; }
 
    .slider:hover { opacity: 1; } 

    .slider::-webkit-slider-thumb { -webkit-appearance: none;
    appearance: none; width: 25px; height: 25px; background:
    #4CAF50; cursor: pointer; } 

    .slider::-moz-range-thumb { width: 25px; height: 25px;
    background: #4CAF50; cursor: pointer; }

<div class="slidecontainer"> 
    <input type="range" min="1000" max="5000000" oninput="myFunction(this)"
    value="250000" class="slider" id="myRange"/> 
    <input type="text" id="demo" value=""/> 
</div>

子问题：

更改onchange="setSlider(this)"时使用#demo，当您单击Enter或从#demo中退出时，幻灯片将移动

        var slider = document.getElementById("myRange"); 
        var output = document.getElementById("demo");
        output.value = slider.value; 
        function myFunction(x) {
        output.value = x.value;
    }
           function setSlider(x) {
         slider.value= x.value;
    }

       .slidecontainer { width: 100%; } 

        .slider { -webkit-appearance: none; width: 100%; height: 25px;
        background: #d3d3d3; outline: none; opacity: 0.7;
        -webkit-transition: .2s; transition: opacity .2s; }
     
        .slider:hover { opacity: 1; } 

        .slider::-webkit-slider-thumb { -webkit-appearance: none;
        appearance: none; width: 25px; height: 25px; background:
        #4CAF50; cursor: pointer; } 

        .slider::-moz-range-thumb { width: 25px; height: 25px;
        background: #4CAF50; cursor: pointer; }

<div class="slidecontainer"> 
        <input type="range" min="1000" max="5000000" oninput="myFunction(this)"
        value="250000" class="slider" id="myRange"/> 
        <input type="text" id="demo" value="" onchange="setSlider(this)"/> 
    </div>

Answer 2

值通常用于输入/表单元素。 innerHTML通常用于div，span，td和类似元素。对于输入更改，您可以绑定输入obj上的change事件

 var slider = document.getElementById("myRange");
    var output = document.getElementById("demo");
    output.value = slider.value;    // input have value not innerhtml
    slider.oninput = function() {
      output.value = this.value;
  }


output.addEventListener("change", function() {
    slider.value = this.value;
 });

将范围滑块输出到文本输入字段

2 个答案: