Как сделать отключенное поле ввода больше в зависимости от содержимого внутри него в JavaScript или CSS

Question

Здравствуйте, у меня есть веб-приложение translaton, такое как google translate, где кто-то печатает слово в поле для английского языка и переводит его в другое поле, но если они пишут действительно длинное слово в поле, которое переводит слово, переводит слово на слово, и вам нужно чтобы прокрутить его, я надеюсь, что кто-то может помочь

вот мой код

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
 <script src='https://code.responsivevoice.org/responsivevoice.js'></script>
<style>
    html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

#input_lang {
    height: 184px;
    width: auto;
    font-size: 32px;
 
}


#output_lang {
    height: 184px;
    /*width: 256px;*/
    overflow-x: scroll;
    white-space: nowrap;
    font-size: 32px;
    width: auto;

}

[type="text"] {
  font: inherit;
  padding: 1em 1em;
  border: 1px solid #eee;
  border-radius: 3px;
  outline: none;
}

:disabled {
  background-color: #fff;
}

.wrapper {
  background:none;
  width: 860px;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

a {
  color: inherit;
  text-decoration: none;
  outline: none;
}

#output_lang {
  color: #7f8c8d;
}

.hello__word {
  font-size: 13px;
  margin-top: 3em;
  color: #000;
}
.warning {
  margin-top: 2em;
}

.warning, .description {
  font-size: 13px;
  color: #ddd;
}

.warning {
  min-height: 30px;
  color: #212121;
}

.love {
  color: #e74c3c;
}

.trnsl {
    font-size: 52px;
}

.englishLang {
    font-weight: bold;
    color: #ccc;
    position: absolute;
    margin-top: 19px;
    margin-left: 38%;
}

.maoriLang {
    font-weight: bold;
    color: #ccc;
    position: absolute;
    margin-top: 108px;
    margin-left: 73%;
}
</style>
<script>
     $('#output_lang').keypress(function() {
        var txtWidth = $(this).width();
        var cs = $(this).val().length;
    
        if(cs>17){
           $(this).width(txtWidth+5);
        }
    });
</script>
<div class="output_input_wrapper"></div><p class="englishLang">English</p><input type="text" id="input_lang" placeholder="type a sentence in">
  <a href="#" class="trnsl">→</a>
  <input type="text" id="output_lang" disabled></div><p class="maoriLang">Maori <i onclick='responsiveVoice.lang = "mi"; responsiveVoice.speak($("#output_lang").val());' class="fas fa-microphone"></i></p></div>
  <!--<div class="warning"></div>-->
  
 <script>
     $('#input_lang').focus();

$('.trnsl').click(function(e) { // keypress()
  var input_lang = $('#input_lang').val().trim();
  e.preventDefault();
  var params = {
    'key': 'trnsl.1.1.20160812T144209Z.b92c44a2b3973f9e.2cbac18d23ff1aa107e58b09a0a58d0b70151193',
    'text': input_lang,
    'lang': 'mi', // output lang
  }
  $('.warning').empty();
  $.ajax({
    url: 'https://translate.yandex.net/api/v1.5/tr.json/translate?' + $.param(params),
    dataType: 'jsonp',
    success: function(json) {
      if (json.code == '501' || !(input_lang) || (+(input_lang))) {
        $('.warning').html('The specified translation direction is not supported or it\'s number').delay(2000).fadeOut(500, function() {
          $(this).html('').css('display', 'block')
        });;
      } else if (json.code == '200') {
        $('#output_lang').val(json.text);
      }
    }
  });
});
 </script>

Спасибо,

Arnav

Answer 1

Я бы использовал textarea для ввода и div для вывода. Текстовые вводы в одну строку.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
 <script src='https://code.responsivevoice.org/responsivevoice.js'></script>

<script>
     $('#output_lang').keypress(function() {
        var txtWidth = $(this).width();
        var cs = $(this).val().length;
    
        if(cs>17){
           $(this).width(txtWidth+5);
        }
    });
</script>
<div class="output_input_wrapper"></div><p class="englishLang">English</p><textarea type="text" id="input_lang" placeholder="type a sentence in">
</textarea>
  <a href="#" class="trnsl">→</a>
  <div id="output_lang"></div><p class="maoriLang">Maori <i onclick='responsiveVoice.lang = "mi"; responsiveVoice.speak($("#output_lang").val());' class="fas fa-microphone"></i></p></div>
  <!--<div class="warning"></div>-->
  
 <script>
     $('#input_lang').focus();

$('.trnsl').click(function(e) { // keypress()
  var input_lang = $('#input_lang').val().trim();
  e.preventDefault();
  var params = {
    'key': 'trnsl.1.1.20160812T144209Z.b92c44a2b3973f9e.2cbac18d23ff1aa107e58b09a0a58d0b70151193',
    'text': input_lang,
    'lang': 'mi', // output lang
  }
  $('.warning').empty();
  $.ajax({
    url: 'https://translate.yandex.net/api/v1.5/tr.json/translate?' + $.param(params),
    dataType: 'jsonp',
    success: function(json) {
      if (json.code == '501' || !(input_lang) || (+(input_lang))) {
        $('.warning').html('The specified translation direction is not supported or it\'s number').delay(2000).fadeOut(500, function() {
          $(this).html('').css('display', 'block')
        });;
      } else if (json.code == '200') {
        $('#output_lang').html(json.text);
      }
    }
  });
});
 </script>