精华内容
下载资源
问答
  • 当需要开发如上这样一个搜索框时。因为是移动端开发,手机屏幕宽度的不确定性,所以不能使用平时的定宽开发。 分析如上图:1.该搜索框由两部分组成:input搜索框+取消按钮;...搜索框-divinput自适应*{mar...

    3ca6daa2f7570e6637655aab3213d1be.png

    当需要开发如上这样一个搜索框时。

    因为是移动端开发,手机屏幕宽度的不确定性,所以不能使用平时的定宽开发。

    6139cb5c9b1cc7c888ab7cc26dcdb446.png

    分析如上图:

    1.该搜索框由两部分组成:input搜索框+取消按钮;

    2.搜索框距离左右两边的距离是固定的,即图中1和2相等;

    3.取消按钮的大小是固定的,以及距离input距离是固定的;

    4.input随着屏幕宽度的变化自适应变化。

    代码:

    html>

    搜索框 - div中input自适应

    *{

    margin:0;

    padding:0;

    }

    .search{

    position: relative;

    height: 32px;

    border-bottom:1px solid #d3d3d3;

    overflow:hidden;

    background: #fff;

    text-align: center;

    overflow:hidden;

    padding:4px 20px;

    }

    .search_bar{

    height: 32px;

    margin-right:92px;

    }

    .search_bar>input{

    width:100%;

    display:inline-block;

    *display:inline;

    border:1px solid #ccc;

    border-radius:5px;

    font-size:14px;

    height:30px;

    padding:0 10px 0 32px;

    background: #f0f0f0 url(/images/webapp/icon.png) no-repeat;

    background-size:32px 32px;

    }

    .search_btn>span{

    position:absolute;

    top:4px;

    right:20px;

    z-index:9;

    line-height:32px;

    color:green;

    }

    取消

    展开全文
  • input自适应高度

    千次阅读 2019-11-20 15:52:13
    ## input自适应高度 js 实现 $(document).ready(function () { var input = $("#div").find("input[type='text']"); input.each(function () { var inpval = $(this).val(); $(th...
    ## input自适应高度
    js 实现
    
    $(document).ready(function () {
            var input = $("#div").find("input[type='text']");
            input.each(function () {
                var inpval = $(this).val();
                $(this).attr("value", inpval);
                this.style.whiteSpace = 'normal';
                $(this).css({"white-space": "normal", "word-wrap": "break-word",
                    "word-break": "break-all","height": "auto","min-height" : "34px","padding": "10px 0px"});
                //white-space:normal;word-wrap:break-word;word-break:break-all
    
                var inptext = $(this).prop("outerHTML");
                inptext = inptext.replace('"text"', '"reset"');
                $(this).parent().append(inptext);
                $(this).remove();
                //$(this).parent().append($(this).val());
                //$(this).remove();
                //$(this).width(textWidth($(this).val()));
            })
        })
    

    效果图

    在这里插入图片描述

    展开全文
  • 搜索框 - divinput自适应 *{  margin:0;  padding:0; } .search{  position: relative;  height: 32px;  border-bottom:1px solid #d3d3d3;  overflow:hidden;  background: #fff;  text-align: ...

    112053_Dm9K_1250113.png

    当需要开发如上这样一个搜索框时。

    因为是移动端开发,手机屏幕宽度的不确定性,所以不能使用平时的定宽开发。

    112310_BvtS_1250113.png

    分析如上图:

        1.该搜索框由两部分组成:input搜索框+取消按钮;

        2.搜索框距离左右两边的距离是固定的,即图中1和2相等;

        3.取消按钮的大小是固定的,以及距离input距离是固定的;

        4.input随着屏幕宽度的变化自适应变化。

    代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>搜索框 - div中input自适应</title>
    <style>
    *{
        margin:0;
        padding:0;
    }
    .search{
        position: relative;
        height: 32px;
        border-bottom:1px solid #d3d3d3;
        overflow:hidden;
        background: #fff;
        text-align: center;
        overflow:hidden;
        padding:4px 20px;
    }
    .search_bar{
        height: 32px;
        margin-right:92px;
    }
    .search_bar>input{
        width:100%;
        display:inline-block;  
        *display:inline;  
        border:1px solid #ccc;
        border-radius:5px;
        font-size:14px;
        height:30px;
        padding:0 10px 0 32px;
        background: #f0f0f0 url(/images/webapp/icon.png) no-repeat;
        background-size:32px 32px;
    }
    .search_btn>span{
        position:absolute;
        top:4px;
        right:20px;
        z-index:9;
        line-height:32px;
        color:green;
    }
    </style>
    </head>
    <body>
    <!--设置整体布局-->
    <div>
        <!--input包裹层,利用块元素的特性(width:100%)使其可以完全填充父级div,使用margin-right在右边留出固定宽度-->
        <div>
            <!--使input完整填充input包裹层,同时设置其padding值,用以存放搜索小图标+页面优化-->
            <input type="text" placeholder="搜索"/>
         </div>
         <!--btn包裹层,可有可无,使用position将其放置在input右边固定位置,利用z-index使得图层不会被覆盖-->
         <div>
             <span>取消</span>
          </div>
        </div>
    </body>
    </html>



    转载于:https://my.oschina.net/zyxchuxin/blog/496821

    展开全文
  • input自适应宽度

    2011-07-27 16:14:39
    input的宽度设置为100%,这样就可以填充整个div的区域,然后在input的后面添加一个span元素,span的visibility属性设置为hidden不可见但占据文档流的位置,这时发现input排布在span的上面,于是把input的position...
    基本实现思路:
    
    将input的宽度设置为100%,这样就可以填充整个div的区域,然后在input的后面添加一个span元素,span的visibility属性设置为hidden不可见但占据文档流的位置,这时发现input排布在span的上面,于是把input的position属性设置为absolute决定定位,这样就可以将input覆盖在span的上面。在这里需要注意的时当input设置为absolute时,他的定位根据第一已定位的祖先元素,所以应把他的第一个父元素div设置成relative相对定位。然后你会发现input的宽度还是充满了整个文档,因为父元素为div他默认是填满他的父元素,但是如果把父元素设置成display:inline发现还是没效果,因为行内元素是不能设置宽度高度的,所以input的宽度就取了div的父元素body的宽度。这时就必须用到display:inline-block;这个css了。不要以为大功告成了,突然间你就会发现IE6 7不完全支持这个属性,可恨的浏览器。幸亏有了大牛们的hack
    {
    display:inline-block;
    *display:inline;
    *zoom:1;
    }

    这样就能在IE6 7中很好的实现了
    最后html+css结果:

    .container {
    position:relative;
    display:inline-block;
    *display:inline;
    *zoom:1;
    }
    .selfAdapta {
    width:100%;
    position:absolute;
    }
    input,span{
    font-family:verdana,Arial,Helvetica,sans-serif;
    font-size: 12px;
    }

    <div id="container" class="container">
    <input type="text" class="selfAdapta"/>
    <span style="visibility:hidden"></span>
    </div>

    接下来就是js的事儿了,简单的想法就是时刻监听着input的输入将input的输入值拷贝到span中,这样就可以让span撑大div元素,通过input的width:100%属性,input也就回随之变大


    $(function(){
    function valueChange(tid,sid){
    var jsUserName = "";

    if($.browser.msie) {// IE浏览器
    $("#" + tid).get(0).onpropertychange = setJsUserName;
    }else{ // 其他浏览器
    setJsUserName();
    $("#"+tid).get(0).addEventListener("input",setJsUserName,false);
    }
    // 设置span的值
    function setJsUserName(){
    $("#"+sid).text($("#"+tid).val());
    }
    }

    valueChange("input","span");
    });


    [color=red](在IE6下还存在问题 ,有待改进)[/color]
    在IE6下虽然用hack方法解决了inline-block问题但是,其元素还是必须设置宽度,才对里面的input实现Width:100%产生效果,但这样做就失去了宽度自适应的效果了,嗨...,没办法~。因为自己项目的原因只能通过将input的z-index属性设置为-1,让后面的元素显示在input的上方,在感觉上有了自适应的效果,看图:
    [img]http://dl.iteye.com/upload/attachment/525933/1ed6c417-8559-3c5e-9b0e-37d6a8b13d38.jpg[/img]
    因为span的原因,后面元素就被往后挤了
    展开全文
  • 高度自适应div

    2010-01-20 18:32:00
    input { border:0px; border:#09C solid 1px} <div id="top"></div> <div id="maina">  <div id="divfont" class="divfont">  我的工作区4545454  我的工作区  我的工作区  我的工作区...
  • 其他部分都是自适应屏幕大小的,而且都在同一行,所以用了display:table-row; 和 display:table-cell 但这样,问题就来了,最右边的div一定要指定很大的宽度,才能靠右,如果设置了float:right也不行。
  • divinput宽度自适应

    2021-03-04 15:26:26
    divinput宽度自适应 style=“width:100%”
  • JQuery加载图片自适应DIV大小

    千次阅读 2013-09-12 10:47:45
    如何在固定大小的div中放置一个图片,当图片较小时显示实际大小,当图片超过div 大小时图片 自动适应...jquery图片自适应大小实现过程的主要代码:  代码如下:   .divImg{ max-height:200px; max-width:200px;
  • 2018.12.10 代办一:javascript中js...2018.12.11 代办二:怎么让input自适应宽度? 这样是写下代办不久后看到的一个面试题 解法一:flex: <div class="box"> <input type="text"> <but...
  • <div class="img" id="img_pic"></div> <input type="file" name="my_file" onpropertychange="file_change(this)" /> AlphaImageLoader兼容性:IE5.5+ 语法: filter : progid:DXImageTransform....
  • input宽度自适应

    2018-09-19 08:25:00
    <div> 文本框:<input id="txtId" type="text" /> </div> <script type="text/javascript"> //获取文本宽度 var textWidth = function (text) { var ...
  • 两个input均分自适应

    2017-09-09 21:59:00
    左边是标题,右边是输入框,由于种种和项目相关原因,我们采取了div布局 div label input*2div里面有1个input,有的时候,遇到日期,会有2个input,为了美观,左右对齐,自适应采取了flex布局,这里的坑是,input有...
  • <html lang="en"> <head> <meta charset="UTF-8"> , ... // 核心 } style> head> <body> <div tabindex="1" class="textarea" contenteditable="true" data-text="输入内容...">div> body> <script> script> html>
  • 但是在Chrome53上面运行还是会出现scrollbar,不会自适应高度。请问这是不是有可能是addEventListener无法接听input事件呢?html代码js代码function makeExpandingArea(container) {var area = container....
  • jsp登录界面是一张图片 在图片上增加div--input,怎么让div 自适应背景大小,浏览器缩小div不在原来位置![![图片说明](https://img-ask.csdn.net/upload/201605/18/1463542782_191206.jpg)
  • input宽度自适应的问题

    千次阅读 2016-09-21 12:01:11
    在很多地方看到过这样的问题,就是关于input宽度设置的问题。 如图,图中黑色框就是设置了100%后,input输入框的展现,很是蛋疼。 <style type="text/css"> .box{width:300px;height:200px;background-color:...
  • 要设计一个输入框的css,如何做到左边div宽度不固定的情况下,右边input宽度自适应? 类似下图这种效果: ![图片说明](https://img-ask.csdn.net/upload/202007/30/1596075668_216694.png)
  • 记得几年前就碰到过这种需求,现在又碰到了,解决方法就是用contenteditable属性来模拟textarea或者input来实现根据输入内容高度自适应,因为contenteditable属性的元素有自带的这个属性,但是这种模拟的有很多不确定...
  • 一、input宽度根据内定文本宽度自适应  背景:项目需求中,前台展示,需要从后台获取的.txt文件解析成很多字符串,然后分别放在前台input框中,贴图:  其中,每一个字符串,长度不一,所以,input框要...
  • input根据内容自适应宽度

    万次阅读 2019-09-23 19:44:58
    而这里的input就需要宽度根据内容自适应。百度搜大多是这两种方法,结果都不是很理想。 // 方法一 <input type="text" @input="changeWidth" id="myInput" class="my-input" /> changeWidth(e) { let...
  • div自适应高度

    千次阅读 2019-06-28 14:59:17
    页面中,有两个divdiv分别需要自适应浏览器高度。 代码如下,是使用了css3的自适应属性来实现的. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>...
  • 业务需求,输入文字,后面的元要紧随...<div class=textcontain> <input type=text v-model.number=item.cardComboMoney maxlength=5 placeholder=设定数值 oninput=value=value.replace(/^(0+)|[^\d]+/g,'')
  • 先来看一下我们要实现的效果:常规的方案是通过JS获取输入的文本长度后乘以文本的宽度,但中英文的文本宽度不相同,...CSS实现该效果的原理:1、用 div 嵌套 input 和 label ;2、将 input 输入的内容同步到 labe...
  • div自适应浏览器

    2013-03-28 20:05:38
    现在用的浏览器为IE9,当改变浏览器尺寸后,div#left以及#right部分会明显被挤到屏幕右侧,我希望 1.#left的左端可以始终和#head以及#footer左端对齐 2.#left宽度+#right宽度正好等于#head宽度也就是#right右端...
  • input输入框的宽度自适应

    万次阅读 2017-09-30 13:45:53
    场景:在写H5移动端的时候,常常会遇到再顶部有搜索框的情况,如下图: 因为要适应不同的移动设备的屏幕宽度,若将所有的元素宽度写死,更换设备后无论是屏幕宽度增大还是缩小,样式一定会乱... <div class="title_

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,101
精华内容 5,640
关键字:

input自适应div