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

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/JwLRvZvar 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() {

   var smallValue = document.getElementById("p-charge");

   var bigValue = smallValue.value;

   var something = bigValue.length;

   something = something*10;

   var somethingElse = something + "px";

   var spannyThing = document.getElementById("forgotwhatidthisisSoReplace");

   spannyThing.style.width = somethingElse;

   setTimeOut(myfunction, 100);

}

myfunction()

Answer 2

基于其他人建议的链接并没有帮助我弄清楚输入字段的动态/流体宽度问题。但它确实让我有动力去弄清楚如何将值放入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>