Skip to content

Instantly share code, notes, and snippets.

@sudaraka

sudaraka/index.html

Created September 13, 2016 11:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sudaraka/b76d833396244ffc324304e3ac0f271b to your computer and use it in GitHub Desktop.
Save sudaraka/b76d833396244ffc324304e3ac0f271b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<html>
<head>
<style>
.expandinginput {
position: relative;
border: 1px solid #888;
background-color: #fff;
}
.expandinginput textarea,
.expandinginput pre {
background: transparent;
margin: 0;
padding: 5px;
outline: 0;
border: 0;
white-space: pre-wrap;
word-space: break-word;
}
.expandinginput > pre {
display: none;
}
.expandinginput.active > pre {
display: block;
visibility: hidden;
}
.expandinginput > textarea {
box-sizing: border-box;
width: 100%;
height: 100%;
}
.expandinginput.active > textarea {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
resize: none;
}
</style>
</head>
<body>
<div class='expandinginput'>
<pre><span></span><br></pre>
<textarea></textarea>
</div>
<script>
const
areas = document.querySelectorAll('.expandinginput'),
updateExpandingTextarea = container => {
const
textarea = container.querySelector('textarea'),
span = container.querySelector('span')
textarea.addEventListener('input', e => {
span.textContent = textarea.value
}, false)
span.textContent = textarea.value
container.className += ' active'
}
areas.forEach(updateExpandingTextarea)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment