Jump to content
vmars316

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

Recommended Posts

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 by vmars316

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...