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

时间：2018-06-19 12:20:53

标签： jquery html css input

我添加了<input type="text">并设置了其静态宽度。总计的输入值是动态变化的，并且它的宽度也是静态的。

问题陈述： 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});
});

但是它不能在按下按键时起作用。.但是在这种情况下。。该值是动态产生的，在按下按键或按下按键时不会更改。

这是我的代码： 

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>

3 个答案:

答案 0 :(得分：2)

您可以尝试这样做：

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

答案 1 :(得分：1)

您可以创建一个函数来为您执行此操作，并在每次单击时调用它。示例：

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);
    setWidth();
  })
  var primaryincome5 = $j("#addnumber5");
  $j(".calculate5").click(function() {
    var totalincome = parseInt(primaryincome5.val() || 0) + parseInt(otherincome.val() || 0);
    $j(".totalamountremaining").val(totalincome);
    setWidth();
  })

  function setWidth() {
    var contents = $j(".totalamountremaining").val();
    var charlength = contents.length;
    newwidth = charlength * 25;
    $j(".totalamountremaining").attr('style', 'width: ' + newwidth + 'px !important;')
  }

})(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>

答案 2 :(得分：1)

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);
    $j(".totalamountremaining1").text(totalincome);
  })
  var primaryincome5 = $j("#addnumber5");
  $j(".calculate5").click(function() {
    var totalincome = parseInt(primaryincome5.val() || 0) + parseInt(otherincome.val() || 0);
    $j(".totalamountremaining").val(totalincome);
    $j(".totalamountremaining1").text(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="hidden">
<span class="totalamountremaining1 primaryincome priceleft2 price-bold-total"> 0 </span>
<span class="super">/month</span>

相关问题
最新问题