div simulates a text box

Recently, when I am doing H5 pages, I often encounter the need to implement highly adaptive and counting text boxes, so I will record them here.

In fact, I read Zhang Xinxu's "div simulation textarea text field to easily achieve high self-adaptation" a long time ago . The current method is the method mentioned in the article, mainly using the contenteditable attribute.

The html structure is as follows:

<div class="textarea_wrap">
    <div id="textarea" class="textarea" name="" contenteditable="plaintext-only"></div>
    <span class="textnum font9"><em id="textnum">0</em>/30</span>   
</div>

Here we mainly introduce the contenteditable attribute : (refer to https://w3c.github.io/editing/contentEditable.html#contenteditable )

Its main attribute values ​​are:

contenteditable="inherit"
contenteditable=""
contenteditable="events"
contenteditable="caret"
contenteditable="typing"
contenteditable="plaintext-only"
contenteditable="true"
contenteditable="false"

In fact, when simulating a text box, "plaintext-only" and "true" are commonly used. "plaintext-only" can make the editing area only type plain text.

In fact, there is an attribute (user-modify) in CSS that can also allow only plain text to be entered in the element, but since it seems that only the webkit kernel supports (-webkit-) at present, the effect is not as good as above.

The following css is written: (for H5, the compatibility of pc is not considered, if necessary, please refer to http://www.zhangxinxu.com/wordpress/2010/12/div-textarea-height-auto/ )

    .textarea_wrap{
        position: relative;
        height: 2rem;
        padding: 0 0.75rem;
        font-size: 0.7rem;
        color: #a3a3a3;
        background-color: #f7f7f7;
        border-top: 1px solid #ececec;
        border-bottom: 1px solid #ececec;
    }

    .textarea{
        display: inline-block;
        min-height: 1rem;
        max-height: 6.8rem;
        width: 78%;
        outline: 0;
        color: #333;
        word-wrap: break-word;
        overflow-y: scroll;
        margin-left: 0.75rem;
    /*    user-modify: read-write-plaintext-only;
        -webkit-user-modify: read-write-plaintext-only;*//*Only supported by the webkit kernel*/
    }

    .textnum {
        position: absolute;
        right: 4%;
        bottom: 0.25rem;
        position: absolute;
        font-size: 0.45rem;
        in{
            font-style: normal;
            &.flow{
                color: #f77171;
            }
        }
    }

    /* font-size:9px chrome*/
    .font9 {
        font-size: 0.45rem;
    }
    @media screen and (max-width:320px){
        .font9 {
            font-size: 0.45rem;
            -webkit-transform: scale(0.75);
            -o-transform: scale(1);
        }
    }

Control count:

First of all, we mainly introduce the DOMSubtreeModified event . (refer to http://www.cnblogs.com/zzsdream/p/5085619.html )

DOMSubtreeModified: Fired on any change in the DOM structure. This event fires after any other event fires.

The reason why this property is used is that there is no change event on the div. When the soft keyboard pops up on the mobile phone, there will be problems with keyup and keydown. The DOMSubtreeModified event perfectly solves these problems.

Second, let's talk about focus . When the text exceeds the maximum limit, enter again, the cursor may appear in the head of the div content, which is not what we want, so use set_focus() to solve it.

The content in the function will not be elaborated. If you want to know more, you can search by yourself.

$("body").on('DOMSubtreeModified', '#textarea', function() {
        changeLength('#textarea', '#textnum', 30, 20);
    });

    function set_focus(el) {//Focus behind the text
        el = el[0]; //jquery object to dom object
        el.focus ();
        if ($.browser.msie) {
            var range = document.selection.createRange();
            this.last = range;
            range.moveToElementText(el);
            range.select();
            document.selection.empty(); //Uncheck
        } else {
            var range = document.createRange();
            range.selectNodeContents(el);
            range.collapse(false);
            var sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }

    function changeLength(textObj, numObj, maxLen, limitLen) {//计数
        var txtval = $ .trim ($ (textObj) .text ()),
            txtlen = txtval.length;
        $(numObj).text(txtlen);
        if (txtlen > 0) {
            $(textObj).next('.textarea_tips').css('display', 'none');
        } else {
            $(textObj).next('.textarea_tips').css('display', 'block');
        }
        if (txtlen > limitLen-1) {
            $(numObj).addClass('colred');
        } else {
            $(numObj).removeClass('colred');
        }
        if (txtlen >= maxLen) {
            $(textObj).text(txtval.substring(0, maxLen - 1));
            $(numObj).html(txtlen);
            set_focus ($ (textObj));
        }
    }

In fact, there are still many pits, such as paste copy and so on. The front end is like this, sometimes there are a lot of details in the small function points. Every time I encounter this situation, it is really painful and happy. Hahaha. . .