jquery - 无法在jquery中使用动态值更改输入的宽度

Question

我添加了 <input type="text">并设置其静态宽度。 total的input值是动态来的，也是有静态宽度的。

问题陈述: input of total has a static width当数量增加时不会改变。我不想要静态宽度.. 我想随着数字的变化动态地改变它的宽度。

我尝试过的:

$('#resizeme').keydown(function(){
 var contents = $(this).val();
 var charlength = contents.length;
 newwidth =  charlength*9;
 $(this).css({width:newwidth});
});

但它在 keydown 上不起作用..但在这种情况下..值是动态的，不会在按键或 keydown 上改变..

这是我的代码:

var $j = jQuery.noConflict();
(function($j) {
  var primaryincome4 = $j("#addnumber4");
  var otherincome = $j(".totalamountremaining");
  $j(".calculate4").click(function() {
    var totalincome = parseInt(primaryincome4.val() || 0) + parseInt(otherincome.val() || 0);
    $j(".totalamountremaining").val(totalincome);
  })
  var primaryincome5 = $j("#addnumber5");
  $j(".calculate5").click(function() {
    var totalincome = parseInt(primaryincome5.val() || 0) + parseInt(otherincome.val() || 0);
    $j(".totalamountremaining").val(totalincome);
  })
})(jQuery);

.add {
  font-size: 40px;
  text-transform: uppercase;
  color: green;
  font-weight: 600;
  letter-spacing: 1px;
  /* margin-left: 20px; */
  width: 120px;
  cursor: pointer;
}

.dolorsign {
  font-size: 40px;
}

.primaryincome.priceleft {
  width: 45px !important;
}

.primaryincome {
  border: none;
  background: white !important;
  font-size: 40px;
  width: 90px !important;
  position: relative;
  top: 0px;
  margin: 0px !important;
  padding: 0px !important;
  /* display: inline-block; */
}

.super {
  font-size: 20px;
  position: relative;
  top: -20px;
}

.price-bold-total {
  width: 50px !important;
  text-align: center;
}

.plan-total-text {
  font-size: 15px;
  margin-right: 12px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="plan wptask">
  <span class="plan-qty qtywidth">
		<span class="add calculate5">
  			<i class="fa fa-plus-square-o" aria-hidden="true"></i>
  			<button>Add</button>
  		</span>
  <span class="dolorsign">$</span>
  <input value="39" id="addnumber5" class="primaryincome priceleft" disabled="" type="text">
  <span class="super">/month</span>
  </span>
</div>
<div class="plan yetadd designtask">
  <span class="plan-qty qtywidth">
		<span class="add calculate4">
  			<i class="fa fa-plus-square-o" aria-hidden="true"></i>
  			<button>Add</button>
  		</span>
  <span class="dolorsign">$</span>
  <input value="1499" id="addnumber4" class="primaryincome" disabled="" type="text">
  <span class="super">/month</span>
  </span>
</div>
<span class="plan-total-text">TOTAL</span>
<span class="dolorsign">$</span>
<input class="totalamountremaining primaryincome priceleft2 price-bold-total" value="0" disabled="" id="txt" type="text">
<span class="super">/month</span>

Answer 1

你可以尝试这样做:

  $j('.totalamountremaining').on("input", function() {
    var contents = $j(this).val();
    var charlength = contents.length;
    newwidth = charlength * 22;
    console.log(newwidth)
    $j(this).css({
      width: newwidth
    });
  });

你最大的问题是使用 !important 因为这会否决 width: newwidth

演示

var $j = jQuery.noConflict();
(function($j) {
  var primaryincome4 = $j("#addnumber4");
  var otherincome = $j(".totalamountremaining");
  $j(".calculate4").click(function() {
    var totalincome = parseInt(primaryincome4.val() || 0) + parseInt(otherincome.val() || 0);
    $j(".totalamountremaining").val(totalincome).trigger("input");
  })
  var primaryincome5 = $j("#addnumber5");
  $j(".calculate5").click(function() {
    var totalincome = parseInt(primaryincome5.val() || 0) + parseInt(otherincome.val() || 0);
    $j(".totalamountremaining").val(totalincome).trigger("input");
  })
  $j('.totalamountremaining').on("input", function() {
    var contents = $j(this).val();
    var charlength = contents.length;
    newwidth = charlength * 22;
    console.log(newwidth)
    $j(this).css({
      width: newwidth
    });
  });
})(jQuery);

.add {
  font-size: 40px;
  text-transform: uppercase;
  color: green;
  font-weight: 600;
  letter-spacing: 1px;
  /* margin-left: 20px; */
  width: 120px;
  cursor: pointer;
}

.dolorsign {
  font-size: 40px;
}

.primaryincome.priceleft {
  width: 45px !important;
}

.primaryincome {
  border: none;
  background: white !important;
  font-size: 40px;
  width: 90px;
  position: relative;
  top: 0px;
  margin: 0px !important;
  padding: 0px !important;
  /* display: inline-block; */
}

.super {
  font-size: 20px;
  position: relative;
  top: -20px;
}

.price-bold-total {
  width: 50px;
  text-align: center;
}

.plan-total-text {
  font-size: 15px;
  margin-right: 12px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="plan wptask">
  <span class="plan-qty qtywidth">
		<span class="add calculate5">
  			<i class="fa fa-plus-square-o" aria-hidden="true"></i>
  			<button>Add</button>
  		</span>
  <span class="dolorsign">$</span>
  <input value="39" id="addnumber5" class="primaryincome priceleft" disabled="" type="text">
  <span class="super">/month</span>
  </span>
</div>
<div class="plan yetadd designtask">
  <span class="plan-qty qtywidth">
		<span class="add calculate4">
  			<i class="fa fa-plus-square-o" aria-hidden="true"></i>
  			<button>Add</button>
  		</span>
  <span class="dolorsign">$</span>
  <input value="1499" id="addnumber4" class="primaryincome" disabled="" type="text">
  <span class="super">/month</span>
  </span>
</div>
<span class="plan-total-text">TOTAL</span>
<span class="dolorsign">$</span>
<input class="totalamountremaining primaryincome priceleft2 price-bold-total" value="0" disabled="" id="txt" type="text">
<span class="super">/month</span>