用DIV实现可扩展的input

最新推荐文章于 2024-05-06 15:16:12 发布

robby1017591076

最新推荐文章于 2024-05-06 15:16:12 发布

阅读量1.9k

点赞数 1

分类专栏：前端文章标签： div实现可扩展的input 可扩展input div的placeholder

本文链接：https://blog.csdn.net/u011579720/article/details/81229901

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

我们在做前端时经常会遇到这样的需求：要求文本输入框可扩展。通常我们会想到使用textarea来代替input，但是textarea如果高度自适应时删除字符，高度不会立即改变到最小的高度。因此可以使用div来代替input。话不多说，直接上代码。以下代码完美实现了div来代替input，并模拟了input的placeholder属性。

HTML：
<div class="li-instead-input input_width7" placeholder="请输入报告结果" style="width: 516px;margin-top: 6px;" οnblur="assignValToInput(this)"></div>
<input type="hidden" name="report_result"/>

CSS:

.li-instead-input{
    border: 1px solid #DFDFDF;
    float: left !important;
    margin-bottom: 0!important;
    border-radius: 3px;
    padding: 0 6px;
    line-height: 30px!important;
    min-height: 33px;
    margin-top: 4px;
    word-wrap:break-word;
}

.li-instead-input:focus{
    border:1px solid deepskyblue !important;
    outline:none !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(10, 176, 252, .6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(10, 176, 252, .6);
}

.li-instead-input:empty::before{
    color:lightgrey;
    content:attr(placeholder);
}

JS:

//将input中的值放到div中
function  assignInputToDiv() {
    var divObj = $(".li-instead-input");
    for(var i=0;i<divObj.length;i++){
        var targetInput = $(divObj[i]).next();
        if(targetInput.val() != null ){
            divObj[i].innerHTML = targetInput.val();
        }
    }
}