input文本框获取文本内容宽度

不想用多行文本框textarea标签，input单行文本框宽度不够，内容显示不完！怎么办。我想点击文本框显示完内容！找了资料，发现可以比较准确获取文本框内容的宽度，做了个简单的页面！input输入超出宽度在下面DIV显示完内容，点击DIV内容隐藏。注意！这里用了VUE.js，呃，我是在IDEA项目上测试的。非静态页面<!DOCTYPE html>&...

温馨提示：

5117人浏览 · 2019-05-31 15:56:38

温馨提示： · 2019-05-31 15:56:38 发布

不想用多行文本框textarea标签，input单行文本框宽度不够，内容显示不完！怎么办。我想点击文本框显示完内容！找了资料，发现可以比较准确获取文本框内容的宽度，做了个简单的页面！

input输入超出宽度在下面DIV显示完内容，点击DIV内容隐藏。

注意！这里用了VUE.js，呃，我是在IDEA项目上测试的。非静态页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <!--vue JS-->
    <script src="../../static/js/vue.min.js"></script>
    <style>
        .apply strong {
            display: block;
            padding: .5rem .5rem;
            background: #fff;
            font-size: .95rem;
            color: #666;
            border-bottom: solid 1px #efefef;
            line-height: 35px;
            font-weight: normal;
        }

        #word {
            width: 100%;
            height: auto;
            background-color: white;
            display: contents;
        }

        .click_work {
            padding-bottom: 8px;
            font-weight: lighter;
            font-size: 13px;
            cursor: pointer; /*鼠标放上变成小手*/
        }
    </style>
</head>
<body>
<form id="apply">
    <div>
        <strong>
            <label>地址：</label>
            <input type="text" ref="address" id="demo-input" autofocus placeholder="请输入地址"
                   style="font-weight:700; color:#333;width: 70px;">
        </strong>
    </div>
    <div id="word">
    </div>
</form>
<script>
    $(document).ready(function () {
        var apply = new Vue({
            el: '#apply',
            data: {},
            mounted: function () {
                var input = $('#demo-input'), val = ' ', span = $('<span/>').css({
                    position: 'absolute',
                    top: -9999,
                    left: -9999,
                    width: 'auto',
                    fontSize: input.css('fontSize'),
                    fontFamily: input.css('fontFamily'),
                    fontWeight: input.css('fontWeight'),
                    letterSpacing: input.css('letterSpacing'),
                    whiteSpace: 'nowrap',
                    ariaHidden: true
                });
                //input后面插入span标签
                span.insertAfter(input);
                //当键盘键被松开时
                $('#demo-input').keyup(function () {
                    //获取input的内容
                    var keywords = $(this).val();
                    //获取div标签
                    var word = $('#word');
                    if (keywords == '') {
                        //隐藏DIV标签
                        word.hide();
                        return;
                    }
                    //复盖内容
                    span.html(keywords.replace(/&/g, '&amp;').replace(/\s/g, '&nbsp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'));
                    //input标签的宽度
                    var input_length = $(this).width();
                    //span标签的宽度
                    var span_length = span.width();
                    if (span_length < input_length) {
                        //隐藏DIV标签
                        word.hide();
                    } else {
                        //清空之前的内容后显示div标签
                        word.empty().show();
                        //添加内容
                        word.append('<strong class="click_work">' + keywords + '</strong>');
                    }
                });
                $(document).on('click', '.click_work', function () {
                    //隐藏DIV标签
                    $('#word').hide();
                });
                $(document).on('click', '#demo-input', function () {
                    //显示DIV标签
                    $('#word').show();
                })
            },
            methods: {}
        });
    });
</script>
</body>
</html>

图片效果

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^