HTML5 입력 유형 범위 범위 값 표시

programing

HTML5 입력 유형 범위 범위 값 표시

codeshow 2023. 8. 15. 11:50

HTML5 입력 유형 범위 범위 값 표시

범위 슬라이더를 사용하고 싶은 웹 사이트를 만들고 있습니다(웹킷 브라우저만 지원하는 것으로 알고 있습니다).

나는 그것을 완전히 통합했고 잘 작동합니다.하지만 저는 사용하고 싶습니다.textbox현재 슬라이드 값을 표시합니다.

내 말은 슬라이더가 처음에 값이 5이면 텍스트 상자에 5로 표시되고, 내가 슬라이드할 때 텍스트 상자의 값이 변경되어야 한다는 것입니다.

이 작업은 다음을 사용하여 수행할 수 있습니까?CSS또는html피하고 싶습니다JQuery.가능합니까?

별도의 자바스크립트 코드 없이 해결책을 계속 찾고 있는 분들을 위한 것입니다.자바스크립트나 jquery 함수를 작성하지 않고는 쉬운 해결책이 거의 없습니다.

<input type="range" value="24" min="1" max="100" oninput="this.nextElementSibling.value = this.value">
<output>24</output>

JsFiddle 데모

텍스트 상자에 값을 표시하려면 출력을 입력으로 변경하기만 하면 됩니다.

주의할 점:여전히 당신의 html 내에 작성된 Javascript이며, 우리는 유사한 작업을 하기 위해 아래와 같은 것을 js로 작성할 수 있습니다.

 document.registrationForm.ageInputId.oninput = function(){
    document.registrationForm.ageOutputId.value = document.registrationForm.ageInputId.value;
 }

요소의 ID 대신 이름을 사용할 수도 있으며, 둘 다 최신 브라우저에서 지원됩니다.

이것은 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="">

편집 가능한 입력이 있는 버전:

<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>

http://jsfiddle.net/Xjxe6/

더 나은 방법은 전체 형태가 아닌 입력 자체에서 입력 이벤트를 포착하는 것입니다(성능 측면에서).

<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 입력 요소에는 요소에 포커스가 있을 때 왼쪽/오른쪽/아래/위쪽 화살표 키로 슬라이더를 이동할 수 있는 등 숨겨진 기능이 하나 있습니다.홈/끝/페이지다운/페이지업 키도 마찬가지입니다.

없는 최단 버전form,min또는 외부 JavaScript.

<input type="range" value="0" max="10" oninput="num.value = this.value">
<output id="num">0</output>

설명.

에서 값을 검색하려면output당신은 일반적으로 사용합니다.id에서 연결할 수 있습니다.oninput사용하는 대신에this.nextElementSibling.value(이미 사용하고 있는 것을 활용합니다.)

위의 예를 다음과 같이 유효하지만 조금 더 복잡하고 긴 답변과 비교해 보십시오.

<input id="num" type="range" value="0" max="100" oninput="this.nextElementSibling.value = this.value">
<output>0</output>

가장 짧은 답변:

사용을 피합니다.this새로 온 사람들에게는 JS에서 이상한 것.
우리는 DOM에서 형제자매를 연결하는 것에 대한 새로운 개념을 피합니다.
우리는 너무 많은 속성을 피합니다.input배치id에 시대에output

메모들

두 가지 예에서 우리는 다음을 추가할 필요가 없습니다.min이 와같 때의값과 의 값0
JavaScript 하기 »this을 더 .

슬라이드를 여러 개 사용하는 경우 jQuery를 사용할 수 있으면 다음을 수행하여 여러 슬라이더를 쉽게 처리할 수 있습니다.

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">

또한 사용함으로써oninput에서.<input type='range'>범위를 끄는 동안 이벤트를 수신합니다.

일반 JavaScript에서:

function displaySliderValue(eSlider){   
    eSlider.parentElement.querySelector('span').textContent = eSlider.value;
}

<div>
    <span>1</span><br>
    <input type="range" min="1" max="100" value="1" oninput="displaySliderValue(this);">
</div>

사람들이 jquery 사용에 대해 신경 쓰지 않기 위해, 여기 ID를 사용하지 않는 짧은 방법이 있습니다.

<label> userAvatar :
  <input type="range" name="userAvatar" min="1" max="100" value="1"
         onchange="$('~ output', this).val(value)" 
         oninput="$('~ output', this).val(value)">
  <output>1</output>
</label>

추가 HTML 없이 모든 범위 입력에 값을 자동으로 추가하는 바닐라 JS 방법이 있습니다.

편집: 크롬 전용.파이어폭스에서 작동하지 않는 줄 몰랐어요.

document.querySelectorAll('input[type=range]').forEach(e => {
  e.setAttribute('data-value', e.value);
  e.addEventListener('input', () => {
    e.setAttribute('data-value', e.value);
  });
});

input[type="range"]::after {
  content: attr(data-value);
  margin-right: -50px;
  padding-left: 10px;
}

<input type="range"><br>
<input type="range"><br>
<input type="range">

(Vanilla) JavaScript를 포함하는 솔루션이 있지만 라이브러리로만 사용할 수 있습니다.한 번 포함한 다음 적절한 설정만 하면 됩니다.source입력 수의 속성입니다.

그source는 " 같합아야니다과다음"이어야 합니다.querySelectorAll들을 범위 입력의 선택기입니다.

selectc에서도 작동합니다.그리고 그것은 여러 청취자들과 함께 작동합니다.그리고 다른 방향으로 작동합니다. 숫자 입력을 바꾸면 범위 입력이 조정됩니다.그리고 나중에 페이지에 추가된 요소에서 작동합니다(자세한 내용은 https://codepen.io/HerrSerker/pen/JzaVQg 참조).

Chrome, Firefox, Edge 및 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>

사용:

 <input min="0" max="100" id="when_change_range" type="range">
 <input type="text" id="text_for_show_range">

및 jQuery 섹션:

 $('#when_change_range').change(function(){
 document.getElementById('text_for_show_range').value=$(this).val();
  });

<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>

여전히 답을 찾고 있는 경우 다음 순서로 설정된 경우 type="range" max work 대신 입력 type="number"를 사용할 수 있습니다.
이름 1개
length2-max 이
3사이즈
4초
5-max
복사하세요.

<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' 카테고리의 다른 글

IE10/Edge에서 작동하지 않는 Cors와 함께 JSON Ajax 요청 게시 (0)	2023.08.15
DIV 중심을 수평 및 수직으로 맞춥니다. (0)	2023.08.15
유형 오류: p.easing[this.easing]이(가) 함수가 아닙니다. (0)	2023.08.15
Ajax 요청 완료 시 sweet alert를 닫는 방법 (0)	2023.08.15
테두리 반지름(%)(%) 및 픽셀(px) 또는 em) (0)	2023.08.15

현재글HTML5 입력 유형 범위 범위 값 표시

각종 프로그래밍 정보를 다루는 블로그입니다.

JSON, PowerShell, C, MySQL, reactjs, Spring, mariaDB, AngularJS, Python, bash, Ajax, Android, SWiFT, CSS, WordPress, oracle, jQuery, sql-server, spring-boot, Excel,

Today :
Yesterday :

codeshow

HTML5 입력 유형 범위 범위 값 표시

HTML5 입력 유형 범위 범위 값 표시

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

« 2024/10 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

HTML5 입력 유형 범위 범위 값 표시

HTML5 입력 유형 범위 범위 값 표시

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바