CODEWITHSUNDEEP
javascripthtmlcssoverflowellipsis
bhim yadav
bhim yadav

Reputation: 51

make html input text field as text-overflow left ellipsis

I am making a binary to decimal calculator using HTML. In which I have made to buttons to enter 0 and 1 by clicking on it without using the keyboard but the problem is that when the input field is filled with 0's and 1's then the next inputted texts are hidden. So I want the text input field text-align right and text-overflow left ellipsis like:

[.........01010101110101]

My code is given below.

<html>
<title>Binary to Decimal</title>
<head>
</head>
<body>
<input id="input" style="text-align:right; text-overflow:ellipsis;" type="text" >
<br>
<br>
<input  onclick="enter(0)" value="0" type="button">
<input onclick="enter(1)" value="1" type="button">
<input onclick="convert()" value="Convert" type="button">
<script>
function enter(n_val){
document.getElementById("input").value += n_val
}
</script>
</body>
</html>

Upvotes: 4

Views: 1445

Answers (1)

Anurag Srivastava
Anurag Srivastava

Reputation: 14413

Set direction: rtl; on #input:

function enter(n_val) {
  document.getElementById("input").value += n_val
}
#input {
  direction: rtl;
  text-overflow:ellipsis;
}
<input id="input" type="text" />
<br/>
<br/>
<input onclick="enter(0)" value="0" type="button">
<input onclick="enter(1)" value="1" type="button">
<input value="Convert" type="button">

Upvotes: 2

Related Questions