How to Duplicate <input> behavior for <p> & <span> ?

vmars316 · July 29, 2019

Hello & Thanks ,When typing into <input> field , I prefer its behavior .

It has a nice smooth scrolling effect .

The other examples have jumpy , stacking or stretching behavior .

How can I 'Duplicate <input> behavior for <p> or <span> ?' .

The reason I don't use <input> is because I need the "contenteditable="true"

ability so that I can I can 'SaveAs' htmlPage and all is entered data .

Thanks

I tried to save this code from https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_input

but it's not working .

<!DOCTYPE html>
<html>
<style>
p {
  display: inline-block;
      height: 20x;
      font-size: 12px;
	  min-width: 100px
}
input {  
width: 100px;
}
div { 
  display: inline-block;
//      width: 300px;
//      border: 1px solid black;
      height: 20px;
      font-size: 12px;
}
span.a {
  display: inline-block;
  overflow: hidden;
  text-align:right;
  width: 50px;
  height: 20px;
  font-size: 12px;
  }

 #inputColor {
  border: 1px solid black;    
  background: #ffe9cc;
}

span.b {
  display: inline-block;
  overflow: hidden;
  width: 100px;
  height: 20px;
  font-size: 12px;
  border: 1px solid black;    
  background: #ffe9cc;
  }
</style>
<body>


  <br>
  Input example: <br>
  Enter your name:
  <input style="background: #ffe9cc;"  name="firstname" type="text"  placeholder="First name">
  <br><br>
  span example:
  <br>
<span class="a">Name:</span>
<span class="b" contenteditable="true" style="background: #ffe9cc; border: 1px solid black;">&nbsp;&nbsp;&nbsp;&nbsp;</span>

  <br><br>
Paragraph example: <br>
  <p>Enter your name: </p>
  <p contenteditable="true" 
      style="  min-width: 100px; border: 1px solid black; background: #ffe9cc;">
  </p>
  <br><br>
  Div-Paragraph example: <br>
 <div> 
  <p>Enter your name: </p>
  <p contenteditable="true" style="background: #ffe9cc; border: 1px solid black;">   </p>
 </div>
</body>
</html>

ForumExample-01-182x200.png.6ba44ce6f0ee8d177306187d5b940c96.png

Edited July 29, 2019 by vmars316

Sign In

How to Duplicate <input> behavior for <p> & <span> ?

Recommended Posts

vmars316

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity