Common DIV tasks (Part 2) — Transform into editors and various DIY applications of DIV

Since the introduction of the contentEditable attribute in HTML5, div can be used as the most commonly used editor just like textarea.
1. Enable div as editor <br />It is very simple to put div into editing state, just need to:

Copy code

The code is as follows:

div.contentEditable=true;

This will put you into editing mode. Of course, you can also set contenteditable directly in HTML.
In general, to achieve visual editing, you can use two methods: contentEditable and designMode. ContentEditable was first implemented on IE, and later major browsers gradually supported contentEditable, and the HTML5 standard also included contentEditable. designMode can only change the entire document to an editable state, but contentEditable can change any HTML element to an editable state. Its application scope is wider than designMode. Using contentEditable is the trend of the future.
ContentEditable and draggable sometimes conflict with each other. When contentEditable=true, draggable (if any) should generally be set to false, otherwise it cannot be edited.
2. When editing div content, press Enter to confirm the modification :
This implementation is very simple. Just determine the key value of the event in the event callback:

Copy code

The code is as follows:

htmlElement.contentEditable = false;
if (event.keyCode == 13) {
htmlElement.blur();
}

3. Determine whether Shift+Enter is pressed, and if pressed, it will wrap the line <br />The implementation principle is the same as above, which is relatively simple:

Copy code

The code is as follows:

if(event.shiftKey && event.keyCode==13) {
return;
}

This is implemented on Chrome. No processing is required, just return directly. In FireFox, you need to add <br> to achieve line breaks:

Copy code

The code is as follows:

if(event.shiftKey && event.keyCode==13) {
var text = htmlElement.textContent;
htmlElement.innerHTML = text + '
';
return;
}

4. When editing div content, line breaks are prohibited <br />Here are several CSS properties related to how to handle content editing beyond the limit:

Copy code

The code is as follows:

width: 80px; ----This line limits the width of the div.
text-overflow:clip; ---Extra text is neither wrapped nor omitted. (If this line is set to ellipsis, an ellipsis mark (...) will be displayed when overflow occurs)
white-space:nowrap; -----Forces text to appear in one line
overflow:hidden; ------------------Hide the overflow text
word-wrap: break-word;------Set automatic line break

Usually, setting the first two can achieve the desired effect. If there are other requirements, you can add the following attributes.
5. Remove the focus frame around the div during editing
Just set outline:none; or outline:0; in CSS.
6. Select all text after Div enters editing state <br />This can be achieved using the modify(alter, direction, granularity) method of the selection object. This method is used to change the position of the focus, or to expand or reduce the size of the selection. This method can be used to implement various operations such as selecting all and moving focus. Here are the meanings of the parameters:
alter: the way of changing. "move" is used to move the focus; "extend" is used to change the selection.
direction: the direction of movement. Optional values are forward | backword or left | right.
Granularity: The unit or size of movement. Optional values: "character", "word", "sentence", "line", "paragraph", "lineboundary", "sentenceboundary", "paragraphboundary", or "documentboundary".
This function is only supported by Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1 and later versions. Official documentation: https://developer.mozilla.org/en/DOM/Selection/modify.
The following example selects all text when the div enters the editing state:

Copy code

The code is as follows:

if (window.getSelection) {
var sel = window.getSelection();
sel.modify('move','left','documentboundary');
sel.modify('extend','right','documentboundary');
}

Unfortunately, FireFox's implementation does not support the "sentence", "paragraph", "lineboundary", "sentenceboundary", "paragraphboundary", "documentboundary" parameters. You need to modify your thinking and use the line parameter to implement it:

Copy code

The code is as follows:

7. Set the div's scroll bar to automatically scroll to the last position
Several useful properties of div are used here: scrollTop, scrollLeft, scrollWidth, scrollHeight. Let’s take a look at the following implementation example:

Copy code

The code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Scrollbar, scrollbar, bottom of page, chat window, " />
<meta name="description" content="Sometimes (such as when developing a chat program), we need to keep the scroll bar at the bottom. For example, in a chat window, the latest sent and received messages should be displayed at the bottom. If you want to see the content at the bottom, you must keep the scroll bar at the bottom."/>
<title>How to keep the scrollbar at the bottom - scrollbar, bottom of the page, chat window, </title>
</head>
<body>
<div id="example">
<h3 id="example_title">How to keep the scrollbar at the bottom</h3>
<div id="example_main">

<script type="text/javascript">
function add()
{
var now = new Date();
var div = document.getElementById('scrolldIV');
div.innerHTML = div.innerHTML + 'time_' + now.getTime() + '
';
div.scrollTop = div.scrollHeight;
}
</script>
<span class="notice">Please click the "Insert a row" button to insert the latest information. When the scroll bar appears, it will automatically stay at the bottom. </span>

<div id="scrolldIV" style="overflow:auto; height: 100px; width: 400px; border: 1px solid #999;"></div>
<input type="button" value="Insert a row" onclick="add();">

</div>
</div>
</body>
</html>

To scroll to the bottom, just set div.scrollTop = div.scrollHeight;. scrollHeight is the absolute width of the inner element, including the hidden part of the inner element. The same goes for scrollLeft. If you scroll to the far right, just set div.scrollLeft = div.scrollWidth;.
In addition, by combining div's offsetHeight, offsetLeft and other related measurement properties, the scroll bar position can be easily controlled.
8. Div input box height adaptation <br />Height adaptation means that as the number of input lines increases, the input box will become higher and higher, and a vertical scroll bar will appear when it reaches a certain height.
As a multi-line text field, textarea meets most of our needs. However, one shortcoming of textarea is that it cannot adapt to the content like ordinary div tags. The textarea is always of fixed height. Sometimes, when you want to make the text field highly adaptive in order to increase the interactive experience, you will encounter trouble. Of course, you can still use JS to control the height and achieve adaptivity. In fact, we can use div here to simulate this effect. Here is an implementation from a netizen:
HTML code:

Copy code

The code is as follows:

The corresponding CSS code:

Copy code

The code is as follows:

.testbox {
width: 400px;
min-height: 120px;
max-height: 300px;
margin-left: auto;
margin-right: auto;
padding: 3px;
outline: 0;
border: 1px solid #a0b3d6;
font-size: 12px;
word-wrap: break-word;
overflow-x:hidden;
overflow-y: auto;
}

In fact, many implementations come from the Internet. I would like to express my sincere gratitude to all the netizens here! There are many other ways to solve many of the problems here. We still encourage everyone to think positively and make the relevant knowledge their own!

<<: Solution to span width not being determined in Firefox or IE

>>: JavaScript two pictures to understand the prototype chain