Question

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

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

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

您可以使用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：

删除了此<input id="p-charge" type="number">
替换为<span id="p-charge"></span>

JS：

添加此var totalFee = $("#p-charge");
添加此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>

这目前可以满足我的需求，但是我认为这是“意大利面条式代码”，确实需要将其全部重新整理为更干净的东西。

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

2 个答案: