버튼을 클릭 할 때 텍스트 상자에로드 스피너를 표시하는 방법은 무엇입니까?

버튼을 클릭 할 때 텍스트 상자에로드 스피너를 표시하는 방법은 무엇입니까? 사용자 이름 및 암호 텍스트 상자와 로그인 버튼이 있다고 가정 해보십시오. 사용자 이름과 비밀번호를 입력하고 로그인 버튼을 클릭하면 텍스트 상자에 회 전자가 표시됩니다. 친절하게 도와주세요. Iam이 JQuery 옵션 또는 Javascript를 찾고있다.버튼을 클릭 할 때 텍스트 상자에로드 스피너를 표시하는 방법은 무엇입니까?

CSS :

input.spinner { 
    background-image:url('spinner.gif'); 
    background-repeat:no-repeat; 
    background-position:5px 5px /* Change to accommodate to your spinner */ 
}

JS :

$('form').submit(function(e){ 
    e.preventDefault(); 
    $f = $(this); 
    $f.submit(); /* replace with your ajax call */ 
    $f.find('input[type="text"], input[type="password"]') 
     .val('') /* Remove values or store them if you need them back */ 
     .addClass("spinner") /* Add the spinning image */ 
     .attr("disabled", "disabled"); /* Disable the inputs */ 
});

출처

2012-10-11 Bino

은 그냥 텍스트 상자를 통해 애니메이션 GIF 몇 위치 jQuery를 사용하여 가시성을 전환하십시오 – paul

이 작업을 수행 할 수 없다고 생각합니다 .....하지만 div를 작성하고 버튼의 핥기에서이 div를 su와 함께 텍스트 상자에 표시하는 것과 같은 몇 가지 대체 방법을 사용할 수 있습니다. ch 유형의 행운을 느낄 수 있으며 텍스트 상자처럼 보일 것이라고 느낍니다. –

텍스트 상자 안에 스피너를 표시해야합니까 ?? 또는 텍스트 상자와 평행하게? –

그냥 입력에 배경 이미지로 "회"이미지를 추가 다음 텍스트 상자 :

<input id='inputsource' />

새로운 CSS 클래스를 정의

.loadinggif 
{ 
    background: 
    url('http://www.hsi.com.hk/HSI-Net/pages/images/en/share/ajax-loader.gif') 
    no-repeat 
    right center; 
}

다음 jQuery 코드하여 testbox이 클래스를 추가 :

$('#inputsource').addClass('loadinggif');

Jsfiddle : http://jsfiddle.net/msjaiswal/FAVN5/

출처

2012-10-11 10:35:22 sunn0

작동하지 않습니다 sunn0..pls help – Bino

좀 더 구체적으로 http://jsfiddle.net/에서 코드를 작성하십시오 – sunn0

것은 이제 당신의 HTML을 가지고 있다고 가정 해 봅시다 양식을 제출하면

출처

2013-05-01 13:37:39

동적 폼 업데이트를위한 간단한 시각적 솔루션을 주셔서 감사합니다. –

어떻게 높이를 설정할 수 있습니까? 그리고 그 이미지의 너비? –

여기 배경 크기 : 20px; // 모든면에 대해 –

버튼을 클릭 할 때 텍스트 상자에로드 스피너를 표시하는 방법은 무엇입니까?

답변

관련 문제