HTML5 입력 유형 범위 표시 범위 값
범위 슬라이더를 사용하려는 웹 사이트를 만들고 있습니다 (웹킷 브라우저 만 지원한다는 것을 알고 있습니다).
나는 그것을 완전히 통합했고 잘 작동합니다. 하지만 textbox현재 슬라이드 값을 표시 하기 위해 a를 사용하고 싶습니다 .
처음에 슬라이더 값이 5이면 텍스트 상자에 5로 표시되어야하고, 텍스트 상자의 값을 슬라이드하면 변경해야합니다.
난 단지 사용하여이 작업을 수행 할 수 있습니다 CSS또는 html. 나는 피하고 싶다 JQuery. 가능할까요?
이것은 jquery가 아닌 javascript를 직접 사용합니다. 시작하는 데 도움이 될 수 있습니다.
function updateTextInput(val) {
document.getElementById('textInput').value=val;
}<input type="range" name="rangeInput" min="0" max="100" onchange="updateTextInput(this.value);">
<input type="text" id="textInput" value="">별도의 자바 스크립트 코드없이 여전히 솔루션을 찾고있는 사람들을 위해. 자바 스크립트 또는 jquery 함수를 작성하지 않고는 쉬운 해결책이 거의 없습니다.
<form name="registrationForm">
<input type="range" name="ageInputName" id="ageInputId" value="24" min="1" max="100" oninput="ageOutputId.value = ageInputId.value">
<output name="ageOutputName" id="ageOutputId">24</output>
</form>
텍스트 상자에 값을 표시하려면 출력을 입력으로 변경하면됩니다.
최신 정보:
여전히 html 내에 작성된 Javascript이므로 바인딩을 아래 JS 코드로 바꿀 수 있습니다.
document.registrationForm.ageInputId.oninput = function(){
document.registrationForm.ageOutputId.value = document.registrationForm.ageInputId.value;
}
요소의 ID 또는 이름을 사용하십시오. 둘 다 모든 브라우저에서 지원됩니다.
편집 가능한 입력이있는 버전 :
<form>
<input type="range" name="amountRange" min="0" max="20" value="0" oninput="this.form.amountInput.value=this.value" />
<input type="number" name="amountInput" min="0" max="20" value="0" oninput="this.form.amountRange.value=this.value" />
</form>
더 나은 방법은 전체 형식 (성능 측면)보다는 입력 자체에서 입력 이벤트를 포착하는 것입니다.
<input type="range" id="rangeInput" name="rangeInput" min="0" max="20" value="0"
oninput="amount.value=rangeInput.value">
<output id="amount" name="amount" for="rangeInput">0</output>
여기에 바이올린이 있습니다 ( idRyan의 의견에 따라 추가됨).
현재 값을 슬라이더 아래에 표시하고 함께 이동하려면 다음을 시도하십시오.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MySliderValue</title>
</head>
<body>
<h1>MySliderValue</h1>
<div style="position:relative; margin:auto; width:90%">
<span style="position:absolute; color:red; border:1px solid blue; min-width:100px;">
<span id="myValue"></span>
</span>
<input type="range" id="myRange" max="1000" min="0" style="width:80%">
</div>
<script type="text/javascript" charset="utf-8">
var myRange = document.querySelector('#myRange');
var myValue = document.querySelector('#myValue');
var myUnits = 'myUnits';
var off = myRange.offsetWidth / (parseInt(myRange.max) - parseInt(myRange.min));
var px = ((myRange.valueAsNumber - parseInt(myRange.min)) * off) - (myValue.offsetParent.offsetWidth / 2);
myValue.parentElement.style.left = px + 'px';
myValue.parentElement.style.top = myRange.offsetHeight + 'px';
myValue.innerHTML = myRange.value + ' ' + myUnits;
myRange.oninput =function(){
let px = ((myRange.valueAsNumber - parseInt(myRange.min)) * off) - (myValue.offsetWidth / 2);
myValue.innerHTML = myRange.value + ' ' + myUnits;
myValue.parentElement.style.left = px + 'px';
};
</script>
</body>
</html>이 유형의 HTML 입력 요소에는 요소에 포커스가있을 때 왼쪽 / 오른쪽 / 아래쪽 / 위쪽 화살표 키로 슬라이더를 이동할 수있는 것과 같은 하나의 숨겨진 기능이 있습니다. Home / End / PageDown / PageUp 키와 동일합니다.
If you're using multiple slides, and you can use jQuery, you can do the follow to deal with multiple sliders easily:
function updateRangeInput(elem) {
$(elem).next().val($(elem).val());
}input { padding: 8px; border: 1px solid #ddd; color: #555; display: block; }
input[type=text] { width: 100px; }
input[type=range] { width: 400px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" min="0" max="100" oninput="updateRangeInput(this)" value="0">
<input type="text" value="0">
<input type="range" min="0" max="100" oninput="updateRangeInput(this)" value="50">
<input type="text" value="50">Also, by using oninput on the <input type='range'> you'll receive events while dragging the range.
<form name="registrationForm">
<input type="range" name="ageInputName" id="ageInputId" value="24" min="1" max="10" onchange="getvalor(this.value);" oninput="ageOutputId.value = ageInputId.value">
<input type="text" name="ageOutputName" id="ageOutputId"></input>
</form>I have a solution that involves (Vanilla) JavaScript, but only as a library. You habe to include it once and then all you need to do is set the appropriate source attribute of the number inputs.
The source attribute should be the querySelectorAll selector of the range input you want to listen to.
It even works with selectcs. And it works with multiple listeners. And it works in the other direction: change the number input and the range input will adjust. And it will work on elements added later onto the page (check https://codepen.io/HerrSerker/pen/JzaVQg for that)
Tested in Chrome, Firefox, Edge and IE11
;(function(){
function emit(target, name) {
var event
if (document.createEvent) {
event = document.createEvent("HTMLEvents");
event.initEvent(name, true, true);
} else {
event = document.createEventObject();
event.eventType = name;
}
event.eventName = name;
if (document.createEvent) {
target.dispatchEvent(event);
} else {
target.fireEvent("on" + event.eventType, event);
}
}
var outputsSelector = "input[type=number][source],select[source]";
function onChange(e) {
var outputs = document.querySelectorAll(outputsSelector)
for (var index = 0; index < outputs.length; index++) {
var item = outputs[index]
var source = document.querySelector(item.getAttribute('source'));
if (source) {
if (item === e.target) {
source.value = item.value
emit(source, 'input')
emit(source, 'change')
}
if (source === e.target) {
item.value = source.value
}
}
}
}
document.addEventListener('change', onChange)
document.addEventListener('input', onChange)
}());<div id="div">
<input name="example" type="range" max="2250000" min="-200000" value="0" step="50000">
<input id="example-value" type="number" max="2250000" min="-200000" value="0" step="50000" source="[name=example]">
<br>
<input name="example2" type="range" max="2240000" min="-160000" value="0" step="50000">
<input type="number" max="2240000" min="-160000" value="0" step="50000" source="[name=example2]">
<input type="number" max="2240000" min="-160000" value="0" step="50000" source="[name=example2]">
<br>
<input name="example3" type="range" max="20" min="0" value="10" step="1">
<select source="[name=example3]">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
<br>
</div>
<br>if you still looking for the answer you can use input type="number" in place of type="range" min max work if it set in that order:
1-name
2-maxlength
3-size
4-min
5-max
just copy it
<input name="X" maxlength="3" size="2" min="1" max="100" type="number" />
참고URL : https://stackoverflow.com/questions/10004723/html5-input-type-range-show-range-value
'Programing' 카테고리의 다른 글
| 이벤트를 한 번만 바인딩 (0) | 2020.08.19 |
|---|---|
| .animate () 콜백이 두 번 호출됩니다. (0) | 2020.08.19 |
| vi 편집기에서 현재 커서 위치에서 주어진 줄 번호까지 삭제 (0) | 2020.08.19 |
| redux를 사용하여 항목을 삭제하는 올바른 방법입니까? (0) | 2020.08.19 |
| 입력 유형 = "날짜"필드에 대한 자리 표시자가 표시되지 않음 (0) | 2020.08.19 |