2011-10-14 2 views
2

jquery 모바일 슬라이더를 사용하고 있습니다. 컨트롤의 텍스트 부분에 입력 된 값이 최소 및 최대 값 범위를 벗어나는 경우 문제가 발생합니다. 나는 정했다. 컨트롤이 포커스를 잃을 때 값은 최소 또는 최대 값 중 잘못된 값으로 더 가까운 값으로 재설정됩니다.jQuery 모바일 슬라이더 값을 최소 또는 최대로 재설정

내가 가진 문제는 사용자가 잘못된 값을 입력 한 다음 양식 제출 버튼을 클릭하고 입력 한 값이 저장되었다고 생각하는 것입니다. 그러나 제출 단추를 클릭 할 때 포커스가 사라지 자마자 슬라이더가 min 또는 max 값을 다시 설정하기 때문에 사용자가 입력 한 값이 아니라 실제로 저장된 값입니다.

이러한 상황이 발생하면 사용자에게 잘못된 값을 입력했음을 알리는 메시지를 팝업하고 싶습니다. 누구든지 이것을 달성하는 방법에 대한 제안이 있습니까? 슬라이더의 .change 이벤트에서 값을 테스트하는 것은 새로 재설정 된 값을 반환하기 때문에 좋지 않습니다.

도움을 주시면 감사하겠습니다.

샘플 코드, 요청에 따라 :

<script type="text/javascript"> 
    $("#Answer").change(function() { 
    alert($("#Answer").val()); // this value is already the adjusted value, rather than the user entered value 
    }); 
</script> 

<label for="Answer" class="ui-input-text"><%=question.Prompt%></label> 
<br /> 
<span id="sliderspan"> 
    <input style="min-width: 3em;" type="range" name="Answer" id="Answer" value="<%=this.Value%>" min="<%=question.MinimumValue %>" max="<%=question.MaximumValue %>" step="0.1" /> 
    <span>&deg;<%=question.Units.ToString()%></span> 
</span> 
+1

질문을 편집하고 예제 코드를 추가하십시오. –

답변

0

이 작업을 수행하려면, 내가 내부 필드 범위의 입력 및 저장 값 KeyUp 이벤트에 바인딩하는 것이 좋습니다 (I 입력 자체 내에서 LastValue을 사용), 다음 변경에 ​​바인딩 이벤트로 LastValue를 Min/Max 값과 비교합니다.

$("#Answer") 
    .bind("keyup", function (e) { 
    e.target.LastValue = $(e.target).val(); 
}) 
    .bind("change", function (e) { 
    if (typeof e.target.LastValue == 'undefined') return; 
    var min = parseInt(e.target.min); 
    var max = parseInt(e.target.max); 
    if (e.target.LastValue > max || e.target.LastValue < min) 
     alert("Wrong Data!"); 
}); 
0

키 업 또는 기타 이벤트 (변경 등)에 대한 바인딩이 실행되지 않음을 발견했습니다. 위젯이 이벤트 전파를 방해하고있는 것 같습니다.

내 경우 사용자가 최대 값을 초과 할 수 있기를 원하며 사용자가 입력 필드에 더 큰 값을 입력하면 슬라이더가 최대 값을 재설정 할 수 있기를 원합니다.

max = isInput ? parseFloat(control.attr("max")) : optionElements.length - 1; 

이 코드 추가 :

내가이 줄 끝에서, 새로 고침 기능의 슬라이더 코드 (jQuery를 모바일 1.4.1) 수정이 작업을 수행하려면 상황에

if(control.val() > max) { 
    max = parseFloat(control.val()); 
    control.attr("max", max); 
} 

당신 제출하기 전에 입력 된 값을 검사하여 경고를 발행하고 제출을 막을 수 있습니다.

라이브러리 코드를 변경하는 방법을 궁금하게 생각하는 경우 가장 좋은 방법은 슬라이더 위젯을 새 파일로 발췌하고 변경 한 다음 jquery mobile을로드 한 후 새 파일을로드하는 것입니다. 슬라이더가 jQuery 모바일 슬라이더를 덮어 씁니다. 나중에 jQuery 모바일을 업그레이드하면 슬라이더가 여전히 오버라이드됩니다 (물론 jQuery의 다른 변경 사항에 따라 다름).

관련 문제