어떻게 자동 입력 필드 값 변경을 시각화합니까

Question

비슷한 데이터가 여러 행에있는 양식이 있습니다. 사용자 경험을 향상시키기 위해 양식 작성을 자동화하고 싶습니다. 예를 들어 한 열을 첫 번째 행에 입력 한 값으로 채우는 것이 좋습니다. 그러나 데이터의 자동 채우기를 시각화하고 싶습니다.

이 양식에서 jQuery UI를 사용할 계획입니다.

질문은 자동 충전 아웃 시각화하는 방법으로 제안 할 무엇인가? 프로젝트에서 비슷한 상황에서 무엇을 사용 했습니까? 아마도 당신은 jQuery-UI에서 다른 UI 라이브러리를 제안 할 수 있을까요?

Answer 1

자동으로 변경된 입력을 강조 표시하거나 해당 입력이 변경되었을 때 몇 초 동안 강조 표시할지 여부는 모르겠지만 jQuery UI를 사용하여 예제처럼 - 처음에는 다음 입력을 대응 흰색 다시 페이딩 :

<input type="text" id="one-1" class="one" /> 
<input type="text" id="two-1" class="two" /> 
<input type="text" id="one-2" class="one" /> 
<input type="text" id="two-2" class="two" /> 

$("input").change(function() { 
    $("input." + $(this).attr("class")).val($(this).val()); 
    $("input." + $(this).attr("class")).not(this) 
    .css("background-color", "lime") 
    .animate({ 
    backgroundColor: 'white' 
    }, 'slow'); 
}); 

Fiddle는 (I는 스택 조각을 추가하려고했지만 그것은 외부의 jQuery UI와 함께 작동하지 않는).