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

Question

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

由于输入文本域，句子出现较大空隙

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

我需要什么:(需要弥合差距)

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

我如何更改此代码以在文本字段上使用自动宽度或更改代码以使用 span抢交易手续费值？

这是我要更改的行:

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

<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 $ <input size='5' id="p-charge" type="number" disabled> so we can get 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>

Answer 1

基于其他人建议的链接并没有帮助我找出输入字段的动态/流体宽度问题。但它确实让我有动力去弄清楚如何将值(value)转化为 span元素而不是使用输入字段。

这是我的解决方案:

HTML:

1. 删除了这个<input id="p-charge" type="number">
2. 替换为 <span id="p-charge"></span>

JS:

1. 添加这个var totalFee = $("#p-charge");
2. 添加这个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) {
  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);

  totalFee.text((charge || 0).toFixed(2));

  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);

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

目前这可以满足我的需要，但我认为这个“意大利面条代码”确实需要将其全部重新设计为更简洁的东西。