ガット入力のVALUE属性

Question

にテキストとしてうまく動くドットアニメーションのいくつかのjs、

var dots = 0; 

$(document).ready(function() 
{ 
    setInterval (type, 600); 
}); 

function type() 
{ 
    if(dots < 3) 
    { 
     $('#dots').append('.'); 
     dots++; 
    } 
    else 
    { 
     $('#dots').html(''); 
     dots = 0; 
    } 
} 

をいくつかのjavascriptの変数を追加しますが（「処理」の後に）私の入力ボタンのVALUE属性でそれを使用することはできません。

<input type="button" value="Pay" onClick="this.disabled=true; this.value='Processing'"> 

正しい方法で挿入するにはどうすればよいですか？ http://jsfiddle.net/te58dadw/2/

Answer 1

のjQueryに表示さ.innerHTML性質を持っていない.attr('value', '.....')又は

var dots = 0; 
 

 
$(document).ready(function() { 
 
    $('#payDots').on('click', function() { 
 
    $(this).attr('disabled', 'disabled'); 
 
    setInterval(type, 600); 
 
    }) 
 

 
}); 
 

 
function type() { 
 
    var dot = '.'; 
 
    if(dots < 3) { 
 
    $('#payDots').val('processing' + dot.repeat(dots)); 
 
    dots++; 
 
    } 
 
    else { 
 
    $('#payDots').val('processing'); 
 
    dots = 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<input id="payDots" type="button" value="Pay">

Answer 2

jQueryのval()を使用して値を設定し、コールバックを使用すると値に簡単に追加できます。

これは有用である可能性扱う小さなプラグイン、あなたは

$('.elements').dots(600, 3); 

のように呼びたいとちょうどゼロ

$('.elements').dots(0); 

を渡すことでキャンセルすることができ

$.fn.dots = function(time, dots) { 
    return this.each(function(i,el) { 
    clearInterval($(el).data('dots')); 

    if (time !== 0) { 
     var d = 0; 
     $(el).data('dots', setInterval(function() { 
     $(el).val(function(_,v) { 
      if (d < dots) { 
      d++; 
      return v + '.'; 
      } else { 
      d = 0; 
      return v.substring(0, v.length - dots) 
      } 
     }) 
     }, time)); 
    } 
    }); 
} 

のようなもの

使いやすさを示すデモンストレーションです。

$.fn.dots = function(time, dots) { 
 
    return this.each(function(i,el) { 
 
    clearInterval($(el).data('dots')); 
 
    
 
    if (time !== 0) { 
 
     var d = 0; 
 
     $(el).data('dots', setInterval(function() { 
 
     $(el).val(function(_,v) { 
 
      if (d < dots) { 
 
      d++; 
 
      return v + '.'; 
 
      } else { 
 
      d = 0; 
 
      return v.substring(0, v.length - dots) 
 
      } 
 
     }) 
 
     }, time)); 
 
    } 
 
    }); 
 
} 
 

 
$(document).ready(function() { 
 
    $('#dots').on('click', function() { 
 
    $(this).val('Proccessing').prop('disabled',true).dots(600, 3); 
 
    
 
    $('#cancel').show(); 
 
    }); 
 
    
 
    $('#cancel').on('click', function() { 
 
    $(this).dots(200, 10); 
 
    $('#dots').dots(0); 
 
    setTimeout(function() { 
 
     $('#dots').prop('disabled', false).val('Pay'); 
 
     $('#cancel').hide().dots(0); 
 
    },2000); 
 
    }).hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="dots" type="button" value="Pay" /> 
 
<br /><br /> 
 
<input id="cancel" type="button" value="Cancel dots" />

Answer 3

<input>.val()要素を使用します。 .append()と.html()は、プロパティ '.innerHTML'を設定します。.valueプロパティではありません。

<input>要素が使用のjQueryに設定することができる.value性質を有する.val(function)

var dots = 0; 
 
var dot = "."; 
 

 
$(document).ready(function() { 
 
    setInterval(type, 600); 
 
}); 
 

 
function type() { 
 
    if (dots < 3) { 
 
    $('input').val(function(i, val) { 
 
     return val + dot 
 
    }); 
 
    dot.concat("."); 
 
    dots++; 
 
    } else { 
 
    $('input').val("Pay"); 
 
    dots = 0; 
 
    dot = "." 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
HERE IT WORKS 
 
<div>processing<span id="dots"></span></div> 
 
<BR> 
 
<BR> HERE IT DOESN"T 
 
<BR> 
 
<input type="button" value="Pay" onClick="this.disabled=true; this.value='Processing'">