how to make a disabled input box bigger depending of the content inside of it in javascript or CSS

Hello I have a translaton web app like google translate where someone types a word in the english box and translates it in another box but If they write a really long word in the box that translates the word cutes the word of and you need to scroll it I hope someone can help

heres my code

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

Thanks,

Arnav

1 Answer
1

I would use textarea for input and div for output. Text inputs are single line.

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

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.