input文本框设置自动宽度,textarea文本域设置自动高度。

input文本框设置自动宽度,textarea文本域设置自动高度。

html代码如下:

DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">script>
    <title>文本框自动设置宽度,文本域自动设置高度title>
    <style type="text/css">
        /*input文本框变下划线*/
        input {
            border: none;
            border-bottom: 1px solid #000;
        }

        textarea {
            width: 80%; /*自动适应父布局宽度*/
            overflow: auto;
            word-break: break-all;
            background-color: #DFE8F6;
            /*在ie中解决断行问题(防止自动变为在一行显示,主要解决ie兼容问题,ie8中当设宽度为100%时,文本域类容超过一行时,
        当我们双击文本内容就会自动变为一行显示,所以只能用ie的专有断行属性“word-break或word-wrap”控制其断行)*/
        }
    style>
    <script type="text/javascript">
        $(function () {
            //设置文本域自动高度
            $.fn.autoHeight = function () {
                function autoHeight(elem) {
                    elem.style.height = 'auto';
                    elem.scrollTop = 0; //防抖动
                    elem.style.height = elem.scrollHeight + 'px';
                }

                this.each(function () {
                    autoHeight(this);
                    $(this).on('keyup', function () {
                        autoHeight(this);
                    });
                });
            }
            $('textarea[autoHeight]').autoHeight();

            //input框自动宽度
            $("input").unbind('keydown change keyup').bind('keydown change keyup', function () {
                var input = $('').css({display: 'none'});
                $('body').append(input);
                var inputDefaultWidth = input.width();
                input.remove();
                var valueWidth = textWidth($(this).val());
                if (valueWidth > inputDefaultWidth) {
                    $(this).width(valueWidth);
                }else{
                    $(this).width(inputDefaultWidth);
                }
            });
        });

        //获取文本宽度
        function textWidth(text) {
            var sensor = $('
' + text + '
'
).css({display: 'none'}); $('body').append(sensor); var width = sensor.width(); sensor.remove(); return width; };
script> head> <body> <div id="content"> <div>文本框: <input class="text" type="text" id="" name="" value=""/> div> <div>文本域:div> <div><textarea autoHeight="true" id="" name="" value="">textarea>div> div> body> html>

展示效果如下:

你可能感兴趣的:(html)