Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body data-input="body">
  <h1 tabindex="1" data-input="heading">Click any Element</h1>
  <form id="form">
    
    <div>
      <label for="name">Name: </label><input type="text" id="name" data-input="name" tabindex="2">
    </div>
    <div>
      <label for="email">Email: </label><input type="email" id="email" data-input="email" tabindex="3">
    </div>
    <div>
      <label for="question">Question: </label><textarea id="question" rows="10" data-input="question" tabindex="4"></textarea>
    </div>
    <div class="submit">
      <input type="submit" id="btn" data-input="button" tabindex="5">
    </div>
      
    <p>Current active element is: <output id="op">[result]</output></p>
    
  </form>
  
  <div class="box" data-input="box" tabindex="6"></div>
  <div class="box2" data-input="box2" tabindex="7"></div>
</body>
</html>
 
body {
  font-family: Arial, sans-serif;
}
​
p {
  text-align: center;
  font-weight: bold;
}
​
h1 {
  font-weight: normal;
  text-align: center;  
}
​
form {
  max-width: 500px;
  margin: 0 auto;
}
form div {
  overflow: hidden;
  padding-bottom: 10px;
}
​
input {
  padding: 5px 0;
}
​
label {
  float: left;
  margin-right: 20px;
  width: 100px;
  text-align: right;
}
​
.submit {
  text-align: center;
  max-width: 70%;
}
​
.submit input {
  padding: 0 10px;
}
​
output {
  font-weight: normal;
}
​
.box {
  width: 100px;
  height: 100px;
  background: aquamarine;
  float: left;
  margin-right: 20px;
}
​
.box2 {
  width: 100px;
  height: 100px;
  background: goldenrod;
  float: left;
}
 
var doc = document,
    output = doc.getElementById('op'),
    activeEl;
​
doc.addEventListener('click', function () {
  activeEl = doc.activeElement;
  output.innerHTML = activeEl.getAttribute('data-input');
}, false);
​
doc.getElementById('btn').addEventListener('click', function (e) {
  e.preventDefault();
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
ImpressiveWebspro
0viewers