Skip to content

Instantly share code, notes, and snippets.

@YuJianrong

YuJianrong/index.html

Created January 10, 2018 21:01
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 YuJianrong/c0fc44d96c034eff8647483d424d66ac to your computer and use it in GitHub Desktop.
Save YuJianrong/c0fc44d96c034eff8647483d424d66ac to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin resizable textares // source https://jsbin.com/wimujah
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="resizable textares">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
div {
box-sizing: border-box;
}
#a {
width: 50%;
border: 1px solid red;
}
#b {
min-height: 20px;
width: 100%;
position: relative;
background: rgba(0,0,255,0.1);
padding: 10px 15px;
word-break: break-word;
}
#c {
white-space: pre-wrap;
}
#d {
position: absolute;
display: block;
resize: none;
top: 0;
left: 0;
bottom: 0;
width: 100%;
border: 0;
box-sizing: border-box;
margin: inherit;
padding: inherit;
font-size: inherit;
background-color: inherit;
color: inherit;
line-height: inherit;
font: inherit;
}
</style>
</head>
<body>
<div id="a">
<div id="b">
<span id="c">Hello, world</span>
<textarea id="d"></textarea>
</div>
</div>
<script id="jsbin-javascript">
// debugger;
document.querySelector("#d").addEventListener("input", () => {
// debugger;
const line = document.querySelector("#d").value;
document.querySelector("#c").textContent = line[line.length-1] === '\n' ? line+'\n' : line;
}, false);
</script>
<script id="jsbin-source-css" type="text/css">div {
box-sizing: border-box;
}
#a {
width: 50%;
border: 1px solid red;
}
#b {
min-height: 20px;
width: 100%;
position: relative;
background: rgba(0,0,255,0.1);
padding: 10px 15px;
word-break: break-word;
}
#c {
white-space: pre-wrap;
}
#d {
position: absolute;
display: block;
resize: none;
top: 0;
left: 0;
bottom: 0;
width: 100%;
border: 0;
box-sizing: border-box;
margin: inherit;
padding: inherit;
font-size: inherit;
background-color: inherit;
color: inherit;
line-height: inherit;
font: inherit;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">
// debugger;
document.querySelector("#d").addEventListener("input", () => {
// debugger;
const line = document.querySelector("#d").value;
document.querySelector("#c").textContent = line[line.length-1] === '\n' ? line+'\n' : line;
}, false);</script></body>
</html>
Raw
jsbin.wimujah.css
div {
box-sizing: border-box;
}
#a {
width: 50%;
border: 1px solid red;
}
#b {
min-height: 20px;
width: 100%;
position: relative;
background: rgba(0,0,255,0.1);
padding: 10px 15px;
word-break: break-word;
}
#c {
white-space: pre-wrap;
}
#d {
position: absolute;
display: block;
resize: none;
top: 0;
left: 0;
bottom: 0;
width: 100%;
border: 0;
box-sizing: border-box;
margin: inherit;
padding: inherit;
font-size: inherit;
background-color: inherit;
color: inherit;
line-height: inherit;
font: inherit;
}
Raw
jsbin.wimujah.js
// debugger;
document.querySelector("#d").addEventListener("input", () => {
// debugger;
const line = document.querySelector("#d").value;
document.querySelector("#c").textContent = line[line.length-1] === '\n' ? line+'\n' : line;
}, false);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment