在输入的 VALUE 属性中添加一些 javascript 变量答案

【问题标题】：adding some javascript variable into input's VALUE attribute在输入的 VALUE 属性中添加一些 javascript 变量
【发布时间】：2017-07-22 00:15:24
【问题描述】：

得到了一些可以作为文本正常工作的 js 动画点，

var dots = 0;

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

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

但不能在我的输入按钮的VALUE属性中使用它（“处理”之后）。

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

如何正确插入？ http://jsfiddle.net/te58dadw/2/

【问题讨论】：

标签： javascript jquery button input

【解决方案1】：

在 jQuery 中使用 .attr('value', '.....') 或 .val()

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

【讨论】：

【解决方案2】：

<input> 元素没有显示的.innerHTML 属性。 .append() 和 .html() 设置元素的 .innerHTML 属性，而不是 .value 属性。

<input> 元素具有 .value 属性，可以使用 .val(function) 在 jQuery 中设置

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

【讨论】：

【解决方案3】：

您可以使用 jQuery 的 val() 来设置值，并且通过回调很容易附加到值。

一个处理这个问题的小插件可能很有用，比如

$.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));
    }
  });
}

你喜欢的称呼

$('.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));
    }
  });
}

$(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" />

【讨论】：