How can I set auto-width/length on text input field?

Question

I'm getting the value of a Stripe transaction fee and displaying it via a disabled text field.

There is a large gap in the sentence due to the input text field

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

What I need: (Need to close the gap)

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

How can I change this code to use an auto width on the text field or change the code to use a span to grab the transaction fee value?

This is the line I would like to change:

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

Codepen if needed: 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>

Does this answer your question? [width:auto for fields](https://stackoverflow.com/questions/4622086/widthauto-for-input-fields) — Libra, Oct 31 '19 at 19:49
@Laif Unfortunately no. In that example it's using a fixed width to control the size of the field. — daugaard47, Oct 31 '19 at 20:25
Why are you using an input for this? I would suggest using scripting to make this happen but it would be much easier to just use scripting to insert the value alone — Libra, Oct 31 '19 at 20:29
Honestly, because I'm not very good at JS. I'm displaying the transaction fees associated with Strip. You can see that here. https://codepen.io/daugaard47/pen/JwLRvZ — daugaard47, Oct 31 '19 at 20:35
I think this is what you are looking for: https://stackoverflow.com/questions/3392493/adjust-width-of-input-field-to-its-input — ReSedano, Oct 31 '19 at 21:47

Chris · Answer 1 · 2019-11-01T11:32:23.360

0

You could use javascript to calculate a number of pixels based on the number of characters the person put into the input using the .value attribute. You can then use .length, to calculate the length then multiply it by 10px for example.


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

edited Nov 01 '19 at 11:32

answered Oct 31 '19 at 19:48

Chris

1,206
2
15
35

Would you be able to expand on this or point me to a tutorial that can show me how to do this? – daugaard47 Oct 31 '19 at 20:26
let me check, be back in a few hours – Chris Nov 01 '19 at 11:27

score 0 · Accepted Answer · answered Nov 01 '19 at 04:40

Based on the links others were suggesting didn't help me figure out the dynamic / fluid width issue with the input field. BUT it did get me motivated to figure out how to get the value into a span element rather than using the input field.

Here was my solution:

HTML:

Removed this <input id="p-charge" type="number">
Replace with this <span id="p-charge"></span>

JS:

Add this var totalFee = $("#p-charge");
Add this 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>

This works for my needs at the moment, but I consider this "Spaghetti Code" and really need to rework all of it to something a little cleaner.

How can I set auto-width/length on text input field?

2 Answers2