如何在文本输入字段上设置自动宽度/长度？

Question

我正在获取 Stripe 交易费用的价值并通过禁用的文本字段显示它。

由于输入的文本字段，句子中有很大的空白

This is the amount $3.50____________that needs to be paid.

我需要什么：（需要缩小差距）

This is the amount $3.50 that needs to be paid.

如何更改此代码以在文本字段上使用自动宽度或更改代码以使用 aspan来获取交易费用值？

这是我想更改的行：

<input size='5' id="p-charge" type="number" disabled>

如果需要 Codepen：https ://codepen.io/daugaard47/pen/JwLRvZ

var Pgoal = document.querySelector('.p-goal');

var Ffixed = document.querySelector('#f-fixed');

var Fpercent = document.querySelector('#f-percent');

var Pcharge = document.querySelector('#p-charge');

var checkbox = document.querySelector('#gift-check');

var totalBox = document.querySelector('.total-box');

var totalDonation = $('.total-box > span');

function f(n) {

  return Number((+n).toFixed(10));

}

function calcPcharge(goal, fixed, percent) {

  return (goal + fixed) / (1 - percent) - (goal);

}

function update() {

  console.log('update')

  var charge = calcPcharge(

    f(Pgoal.value),

    f(Ffixed.value),

    f(Fpercent.value / 100)

  );

  Pcharge.value = (charge || 0).toFixed(2);

  

  var total = checkbox.checked ? f(Pgoal.value) + f(charge) : f(Pgoal.value);

  totalDonation.text(total.toFixed(2));

  

  document.querySelector("input[name='amount']").value = total;

}

[].forEach.call(document.querySelectorAll('input'), function() {

  this.addEventListener('input', update);

  this.addEventListener('change', update);

});

update();

checkbox.addEventListener('change', update);

input[type="number"]:disabled {

  background-color: transparent;

  border-style: none;

  text-decoration: underline;

  color: tomato

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h2>Cost $<span class="total-box"><span></span></span></h2>

Answer 1

您可以使用 javascript 根据该人使用该.value属性放入输入的字符数来计算像素数。然后.length，您可以使用, 来计算长度，然后将其乘以 10px，例如。function myfunction() {&nbsp; &nbsp;var smallValue = document.getElementById("p-charge");&nbsp; &nbsp;var bigValue = smallValue.value;&nbsp; &nbsp;var something = bigValue.length;&nbsp; &nbsp;something = something*10;&nbsp; &nbsp;var somethingElse = something + "px";&nbsp; &nbsp;var spannyThing = document.getElementById("forgotwhatidthisisSoReplace");&nbsp; &nbsp;spannyThing.style.width = somethingElse;&nbsp; &nbsp;setTimeOut(myfunction, 100);}myfunction()

Answer 2

基于其他人建议的链接并没有帮助我弄清楚输入字段的动态/流体宽度问题。但它确实让我有动力去弄清楚如何将值放入span元素而不是使用输入字段。这是我的解决方案：HTML：删除了这个&nbsp;<input id="p-charge" &nbsp;type="number">换成这个&nbsp;<span id="p-charge"></span>JS：添加这个&nbsp;var totalFee = $("#p-charge");添加这个&nbsp;totalFee.text((charge || 0).toFixed(2));var Pgoal = document.querySelector(".p-goal");var Ffixed = document.querySelector("#f-fixed");var Fpercent = document.querySelector("#f-percent");var Pcharge = document.querySelector("#p-charge");var checkbox = document.querySelector("#gift-check");var totalBox = document.querySelector(".total-box");var totalFee = $("#p-charge");var totalDonation = $(".total-box > span");function f(n) {&nbsp; return Number((+n).toFixed(10));}function calcPcharge(goal, fixed, percent) {&nbsp; return (goal + fixed) / (1 - percent) - goal;}function update() {&nbsp; console.log("update");&nbsp; var charge = calcPcharge(&nbsp; &nbsp; f(Pgoal.value),&nbsp; &nbsp; f(Ffixed.value),&nbsp; &nbsp; f(Fpercent.value / 100)&nbsp; );&nbsp; Pcharge.value = (charge || 0).toFixed(2);&nbsp; var total = checkbox.checked ? f(Pgoal.value) + f(charge) : f(Pgoal.value);&nbsp; totalFee.text((charge || 0).toFixed(2));&nbsp; totalDonation.text(total.toFixed(2));&nbsp; document.querySelector("input[name='amount']").value = total;}[].forEach.call(document.querySelectorAll("input"), function() {&nbsp; this.addEventListener("input", update);&nbsp; this.addEventListener("change", update);});update();checkbox.addEventListener("change", update);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><h2>Cost $<span class="total-box"><span></span></span></h2><span>$</span><input type="number" min="1.00" max="200000.00" step="0.01" value="60" id="other_amount" name="other_amount" class="p-goal"><span>USD</span><input type="hidden" id="f-fixed" type="number" value="0.30"><input type="hidden" id="f-percent" type="number" value="2.9"><p>Gift transaction fee of $<span id="p-charge"></span> so we can get 100% of your payment?</p><!-- <p>Gift transaction fee of $ <input id="p-charge"&nbsp; type="number"> so we can git 100% of your payment?</p> --><input type="checkbox" value="yes" name="yes" id="gift-check" autocomplete="off">Yeah, Sure!<p>Total Amount $<span class="total-box"><span></span></span></p>