Editable HTML Paragraph Text

Written by @kerixa 1 March 2021

There are texts in all websites and each of them is important for a specific section, some are used to introduce the website and some texts are used to express the contents. However where we want these texts to be editable and let the visitors to change and revise them, one wise them is to make them in-situ editable and avoid using separate forms. The following code example, shows it to you.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
@import url('https://fonts.googleapis.com/css?family=Slabo+27px');

* {
    font-family: 'Slabo 27px', serif;
    color: #2b2e30;
    box-sizing: border-box;
}

.container {
    width: 770px;
    margin: 20px auto;
}

.paragraph {
    margin: 2px;
    width: calc(33.3333333% - 6px);
    display: inline-block;
}

.paragraph > h2 {
	font-weight: 400;
	font-size: 40px;
	margin: 0;
	text-align: center;
	border-bottom: 1px solid #798186;
}

.paragraph > textarea {
	width: 100%;
	height: 200px;
	resize: none;
	padding: 5px;
	border: none;
	font-size: 16px;
	text-align: justify;
}

.paragraph ::-webkit-scrollbar {
	display: none;
}

.paragraph > textarea:focus {
	outline: none;
}

@media(max-width:800px) {
    .container {
        width: 670px;
    }
}

@media(max-width:700px) {
    .container {
        width: 500px;
    }
}

@media(max-width:600px) {
    .container {
        width: 100%;
    }

    .paragraph {
        width: calc(50% - 6px);
    }
}

@media(max-width:400px) {
    .paragraph {
        margin: 0 auto;
        width: 75%;
        display: block;
    }
}

@media(max-width:300px) {
    .paragraph {
        margin: 0 auto;
        width: 100%;
        display: block;
    }
}
</style>
<div class='container'>
  <div class='paragraph'>
    <h2>Paragraph</h2>
    <textarea spellcheck='false'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget. Eu tincidunt tortor aliquam nulla facilisi cras fermentum. Enim lobortis scelerisque fermentum dui faucibus in ornare quam.</textarea>
  </div>
</div>
<font face="Tahoma"><a target="_blank" href="http://www.htmlfreecode.com/"><span style="font-size: 8pt; text-decoration: none">HTML Free Code</span></a></font>
<a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300