Question

有没有办法将<input type="range">和<input type="number">的值相关联？

我想更改滑块或到数字输入，并更新这两个字段。出于某种原因，我只能从范围元素中获取未定义的值。

以下是本文档这一部分的当前JavaScript和HTML：

function updateTextInput1(val) {
  alert(val);
  document.getElementById('num1').value = val;
}

<input class="inputRange" type="range" min="0" max="100" onchange="updateTextInput1(this.val)" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />

Answer 1

它不起作用，因为updateTextInput1(this.val)应为updateTextInput1(this.value)：

function updateTextInput1(val) {
  document.getElementById('num1').value = val;
}

<input class="inputRange" type="range" min="0" max="100" onchange="updateTextInput1(this.value)" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />

但是，我建议使用unobtrusive JavaScript。

只需将input事件附加到每个元素即可。这样做，两个元素将同步。

var range = document.querySelector('.inputRange');
var field = document.getElementById('num1');

range.addEventListener('input', function (e) {
  field.value = e.target.value;
});
field.addEventListener('input', function (e) {
  range.value = e.target.value;
});

<input class="inputRange" type="range" min="0" max="100" value="0" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />

或者您可以使用更紧凑的方法并选择兄弟元素：

document.querySelector('.inputRange').addEventListener('input', updateValue);
document.getElementById('num1').addEventListener('input', updateValue);

function updateValue (e) {
  var sibling = e.target.previousElementSibling || e.target.nextElementSibling;
  sibling.value = e.target.value;
}

<input class="inputRange" type="range" min="0" max="100" value="0"/>
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />

Answer 2

错误是： this.val 而不是 this.value

＆＃13;

<html ng-app="myApp">
<head>
    <title>Confirm Dialog Box</title>
 <!-- 
    in the link above i create a custom dialog box
 -->
</head>
<body>

<div ng-controller="loglistController">
<table>
  <tr ng-repeat="x in names">
    <td onclick="showDialog()" ng-click="showInEdit(x)">{{ x.Name }}</td>
    <td onclick="showDialog()" ng-click="showInEdit(x)">{{ x.Country }}</td>
  </tr>
</table>


             <div id="white-background">
</div>
<div id="dlgbox">
    <div id="dlg-header"><h3>Information</h3></div>
    <div id="dlg-body">
      Name <input type="text" ng-model="selectedPerson.Name" /><br/>
      Country <input type="text" ng-model="selectedPerson.Country" /><br/>


    </div>
    <div id="dlg-footer">
        <button onclick="dlgOK()">Update</button>
        <button onclick="dlgCancel()">Exit</button>
    </div>
</div>

＆＃13;

var myApp = angular.module('myApp', ['ngRoute']);

myApp.controller('loglistController', ['$scope', '$http', function ($scope, $http) {

    $scope.data=[];
    $scope.selectedPerson={ Name:"",Country:""}; 

            $http.get("loglistajax.php")
                .then(function (response) {$scope.names = response.data.records;});

    $scope.showInEdit=function(person){
    $scope.selectedPerson = person;
    };



 }]);

＆＃13;

Answer 3

要在每次更改范围或输入文字时显示，您可以在输入范围内使用oninput和onchange，并在输入类型文字上使用onkeypress和onchange ：

function updateTextInput1(val) {
  val = val > 100 ? 100 : val;
  val = val < 0 ? 0 : val;
  document.getElementById('range').value = val;
  document.getElementById('num1').value = val;
}

    <input class="inputRange" id="range" type="range" min="0" max="100" oninput="updateTextInput1(this.value)" onchange="updateTextInput1(this.value)" />
    <input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" onkeypress="updateTextInput1(this.value)" onchange="updateTextInput1(this.value)" />

是否可以链接范围和数字HTML输入？

3 个答案: