Width:Auto for <Input> Fields

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>

How to set html input tag width fit-content in css

You can do like this.
I posted two solution with span and data-*.

html

    <p>solution with span <span class="number-input" role="textbox" contenteditable>200001230001003002</span></p>
    
    <p>Solution with data-*<label class="input-sizer" data-value="200001230001003002">
        <input class="number-input1" type="text" oninput="this.parentNode.dataset.value = this.value" size="1" value="200001230001003002">
    </label></p>
    <button class="save"></button>

-css

.number-input {
  border: 1px solid #ccc;
  font-family: inherit;
  font-size: inherit;
  padding: 1px 6px;
}

.number-input1{
  font-family: inherit;
  font-size: inherit;
}

.input-sizer {
  display: inline-grid;
  vertical-align: top;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  font-family: inherit;
  font-size: inherit;
}  

.input-sizer::after 
{
    content: attr(data-value) "  ";
    visibility: hidden;
    font-family: inherit;
    font-size: inherit;
    white-space: pre-wrap; 
}

Input width auto adjust using pure CSS only

try this

Html

<div class="newsletter">
    <button class="submit-button" title="Subscribe" type="submit">Go</button>
    <input type="email" class="email-input" title="Sign up for our newsletter" value="email">
</div>
<div class="newsletter">
    <button class="submit-button" title="Subscribe" type="submit">Go</button>
    <input type="email" class="email-input1" title="Sign up for our newsletter" value="email">
    <div class="email-input">want to make input like this</div>
    <!-- just for ref only -->
</div>

Css

*{
    border:0;
    padding:0;
}
.newsletter:after {
  content: '';
  clear: both;
  display: table;
}
.submit-button {
  float: right;
    width:50px;
}
.email-input {
  overflow: hidden;
  background: #f1f1f1;
  border: 1px solid #000;
}
.email-input1{
    width: 100%;
    width: calc(100% - 60px);
    background: #f1f1f1;
  border: 1px solid #000;
}

Fiddle Demo

Auto-scaling input to width of value in React

After a lot of fiddling around, I found a solution!

import React, { useState, useRef, useEffect } from 'react';

export default () => {
  const [content, setContent] = useState('');
  const [width, setWidth] = useState(0);
  const span = useRef();

  useEffect(() => {
    setWidth(span.current.offsetWidth);
  }, [content]);

  const changeHandler = evt => {
    setContent(evt.target.value);
  };

  return (
    <wrapper>
      <span id="hide" ref={span}>{content}</span>
      <input type="text" style={{ width }} autoFocus onChange={changeHandler} />
    </wrapper>
  );
};

To get a reference to the #hide span I employ useRef. Then, the width state variable can be updated via the function defined inside useEffect, which gets called everytime content changes.

I also had to switch the display: none in the css of #hide for position: absolute and opacity: 0, as otherwise targetRef.current.offsetWidth would always be 0.

Here's a working demo.

How to make input type text auto-expand also set specific width expand.

check your jsFiddle

HTML

 <input id="menu_search" type="text" size="20" placeholder="search here..." /> 

CSS

#menu_search{
    position: absolute;
    width: auto;
    max-width: 1280px;
    display: inline; 
    float: right;
    right: 0px;
    z-index: 99;
}

j-Query (library 1.7.2)

$(function(){ 
    $('#menu_search').keyup(function(){ 
        var size = parseInt($(this).attr('size')); 
        var chars = $(this).val().length; 
        if(chars >= size) $(this).attr('size', chars); 
    }); 
}); 

---

Related Topics