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

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

由于输入文本字段的原因，句子中存在较大的空白

这是需要支付的3.50美元。

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

这是需要支付的3.50美元。

如何更改此代码以在文本字段上使用自动宽度，或如何更改代码以使用

span

获取交易费用值？

这是我想更改的行：

代码笔（如果需要）：

var Pgoal=document.querySelector（'.p-goal'）；
var ffix=document.querySelector（'f-fixed'）；
var Fpercent=document.querySelector（'f-percent'）；
var Pcharge=document.querySelector（“#p-charge”）；
var checkbox=document.querySelector（“#礼品支票”）；
var totalBox=document.querySelector（'.totalBox'）；
var total捐赠=$（'.total box>span'）；
函数f（n）{
返回编号（（+n）.toFixed（10））；
}
功能计算费用（目标、固定、百分比）{
回报率（目标+固定）/（百分之一）-（目标）；
}
函数更新（）{
console.log（'update'）
var费用=calcPcharge(
f（Pgoal.值），
f（固定值），
f（百分之f.value/100）
);
Pcharge.value=（电荷| | 0）.toFixed（2）；
var总计=复选框。选中？f（Pgoal.value）+f（费用）：f（Pgoal.value）；
total捐赠文本（total.toFixed（2））；
document.querySelector（“input[name='amount']”），value=total；
}
[]forEach.call（document.querySelectorAll（'input'），function（）{
此.addEventListener（“输入”，更新）；
此.addEventListener（'change'，update'）；
});
更新（）；
复选框.addEventListener（'change'，update'）
input[type=“number”]：禁用{
背景色：透明；
边框样式：无；
文字装饰：下划线；
颜色：西红柿
}

成本$
$
美元
礼品交易费$100，这样我们就可以得到您100%的付款

是的，当然！
总额$
您可以使用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()

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

根据其他人建议的链接，我无法解决输入字段的动态/流体宽度问题。但它确实激发了我去思考如何将值输入到
span
元素中，而不是使用输入字段

以下是我的解决方案：

HTML:

已删除此

替换为此

JS:

添加此
var totalFee=$（“#p-charge”）

将此
totalFee.text（（费用| | 0）.toFixed（2））


var Pgoal=document.querySelector（“.p-goal”）；
var ffix=document.querySelector（“f-fixed”）；
var Fpercent=document.querySelector（#f-percent”）；
var Pcharge=文件查询选择器（“p-charge”）；
var checkbox=document.querySelector（“礼品支票”）；
var totalBox=document.querySelector（“.totalBox”）；
var总费用=$（“p-费用”）；
var total捐赠=$（“.total box>span”）；
函数f（n）{
返回编号（（+n）.toFixed（10））；
}
功能计算费用（目标、固定、百分比）{
回报率（目标+固定）/（百分之一）-目标；
}
函数更新（）{
控制台日志（“更新”）；
var费用=calcPcharge(
f（Pgoal.值），
f（固定值），
f（百分之f.value/100）
);
Pcharge.value=（电荷| | 0）.toFixed（2）；
var总计=复选框。选中？f（Pgoal.value）+f（费用）：f（Pgoal.value）；
totalFee.text（（费用| | 0）.toFixed（2））；
total捐赠文本（total.toFixed（2））；
document.querySelector（“input[name='amount']”），value=total；
}
[]forEach.call（document.querySelectorAll（“输入”），function（）{
此.addEventListener（“输入”，更新）；
本附录为附录列表（“变更”，更新）；
});
更新（）；
复选框.addEventListener（“更改”，更新）

成本$
$
美元
礼品交易费$100，这样我们就可以得到您100%的付款

是的，当然！
总额$
基于其他人建议的链接，没有帮助我解决输入字段的动态/流体宽度问题。但它确实激发了我去思考如何将值输入到
span
元素中，而不是使用输入字段

以下是我的解决方案：

HTML:

已删除此

替换为此

JS:

添加此
var totalFee=$（“#p-charge”）

将此
totalFee.text（（费用| | 0）.toFixed（2））


var Pgoal=document.querySelector（“.p-goal”）；
var ffix=document.querySelector（“f-fixed”）；
var Fpercent=document.querySelector（#f-percent”）；
var Pcharge=文件查询选择器（“p-charge”）；
var checkbox=document.querySelector（“礼品支票”）；
var totalBox=document.querySelector（“.totalBox”）；
var总费用=$（“p-费用”）；
var total捐赠=$（“.total box>span”）；
函数f（n）{
返回编号（（+n）.toFixed（10））；
}
功能计算费用（目标、固定、百分比）{
回报率（目标+固定）/（百分之一）-目标；
}
函数更新（）{
控制台日志（“更新”）；
var费用=calcPcharge(
f（Pgoal.值），
f（固定值），
f（百分之f.value/100）
);
Pcharge.value=（电荷| | 0）.toFixed（2）；
var总计=复选框。选中？f（Pgoal.value）+f（费用）：f（Pgoal.value）；
totalFee.text（（费用| | 0）.toFixed（2））；
total捐赠文本（total.toFixed（2））；
document.querySelector（“input[name='amount']”），value=total；
}
[]forEach.call（document.querySelectorAll（“输入”），function（）