Shulou(Shulou.com)06/03 Report--

This article mainly introduces what are the common uses of DIV, which have certain reference value. Interested friends can refer to it. I hope you will gain a lot after reading this article. Let Xiaobian take you to understand it together.

1. Enable div as editor

Getting div to edit is simple:

The code is as follows:

div.contentEditable=true;

This will allow you to enter editing mode. Of course, you can also set contenteditable directly in html.

In general, visual editing can be achieved using two methods: contentEditable and designMode. contentEditable was first implemented on IE, and later major browsers continued to support contentEditable, and the HTML5 standard also included contentEditable. DesignMode can only change the document as a whole to editable state, but contentEditable can change any HTML element to editable state, the application scope is wider than designMode, contentEditable is the future trend.

contentEditable and draggable sometimes conflict, when contentEditalbe=true, draggable(if any) should generally be set to false, otherwise it cannot be edited.

2. When editing div content, support Enter to confirm modification:

This implementation is very simple, just judge the event key value in the event callback:

The code is as follows:

htmlElement.contentEditable = false;

if (event.keyCode == 13) {

htmlElement.blur();

}

3. Determine whether to press Shift+Enter, press to wrap

This realization is the same as above, which is relatively simple:

The code is as follows:

if(event.shiftKey && event.keyCode==13) {

return;

}

This is implemented in Chrome, do not do anything, return directly. This is what you need to add in FireFox

To achieve the new line:

The code is as follows:

if(event.shiftKey && event.keyCode==13) {

var text = htmlElement.textContent;

htmlElement[xss_clean] = text + '

';

return;

}

4. When editing div content, prohibit line breaks

Here are a few CSS properties related to how to handle content beyond editing:

The code is as follows:

width: 80px; ---This line limits the width of the div.

text-overflow:clip; ---The extra text is not wrapped or omitted. (If this line is set to ellipsis, the omission mark (...) is displayed when overflow occurs.)

white-space:nowrap; ----Forces text to appear in one line

overflow:hidden; -----------------Hide overflow text

word-wrap: break-word;------

Usually the first two can be set to achieve the effect, if there are some other requirements, you can add a few attributes after.

5. Remove the focus box around the div when editing

Set outline:none; or outline:0; in CSS.

6. Select all text after Div enters editing state

This can be done using modify(alter, direction, granularity) methods with selection objects. This method is used to change the position of the focus, or expand or reduce the size of the selection. Using this method, you can achieve a variety of operations such as selecting all, moving the focus, etc. Here are the meanings of the parameters:

ALTER: The way to change. "move" to move focus;"extend" to change selection.

direction: direction of movement. Optional value forward| backword or left| right。

granularity: unit or size of movement. Optional values, character", "word", "sentence", "line", "paragraph", "lineboundary", "sentenceboundary", "paragraphboundary", or "documentboundary".

Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1 and later versions support this function, official documentation: https://developer.mozilla.org/en/DOM/Selection/modify.

Here's an example of selecting all text when a div enters edit mode:

The code is as follows:

if (window.getSelection) {

var sel = window.getSelection();

sel.modify('move','left','documentboundary');

sel.modify('extend','right','documentboundary');

}

Unfortunately, FireFox implementations do not support the "sentence", "paragraph", "lineboundary", "sentenceboundary", "paragraphboundary", "documentboundary" parameters. You need to modify the idea and use the line parameter to achieve:

The code is as follows:

var isFireFox = function() {

var ua = navigator.userAgent.toLowerCase();

return !! ua.match(/firefox\/([\d.]+)/);

};

if (isFireFox()) {

var count = htmlElement[xss_clean].split('

').length;

for (var i = 0; i < count; i++) {

sel.modify('extend', 'right', 'line');

}

}

7. Set div's scroll bar to automatically scroll to the last position

There are several useful attributes of div that you will use here: scrollTop, scrollLeft, scrollWidth, scrollHeight. Let's start with the following implementation example:

The code is as follows:

Ways to keep the scrollbar at the bottom-scrollbar, scrollbar, bottom of page, chat window,

How to keep the scrollbar at the bottom

function add()

{

var now = new Date();

var div = document.getElementById('scrolldIV');

div[xss_clean] = div[xss_clean] + 'time_' + now.getTime() + '

';

div.scrollTop = div.scrollHeight;

}

Please click on the "Insert a Line" button to insert the latest information. When the scroll bar appears, the scroll bar will automatically remain at the bottom.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.