怎么让input控件，填充满td

最新推荐文章于 2024-03-07 16:20:12 发布
最新推荐文章于 2024-03-07 16:20:12 发布
阅读量1.5w 收藏 3
点赞数 5
分类专栏： 网站的制作 文章标签： input控件填充td td与边同 齐
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42636552/article/details/85089781
版权

怎么变成这个样子呢，看起来简单大方

在这里插入图片描述

只需要在input控件里面插入一行代码就可以了。

style="width: 100%; height: 100%"

最后的代码版本是这样子的

<input id="phonenumber" type="text"   style="width: 100%; height: 100%" />

然后就成功了。

默默J
关注
  • 5
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
基于jquery的高性能td和input切换并可修改内容实现代码
12-07
在之前的基础上，添加方向键左右支持。 在实际工作中，我们会碰到这样一个情况。在页面中显示着100个数据，同时用户还希望他可以更改其中的数据，普通的方式可能如下，   这种方式会出现一个问题，就是页面显示的时候有点慢，同时如果有滚动条的话，会有些卡。下面给出我的一个解决方法，显示的时候全是td的，没有input标签，如下  当你点击其中一个td时，就会出现下面这样 当你点击td的时候，会在td动态加入一个input同时把td的值赋给input，当你鼠标离开input时，会把input的值赋给td。同时支持回车，上下方向键，进行向右，上下移动。 可以对这个做一些扩展，做出一些很实际的功能，（
关于html中table单元格的填充
u010931445的专栏
03-20 7432
1设置单元格必须对某一列全部设置方能显示出效果 2要使标签填充满单元格，有两种方法，第一种：style="width:100%;"在td太窄的时候不好用，对于合并的但与个无效  第二种方法 style="border:0px">  适合于合并后的单元格
javascript将table的td变为可编辑的input，实现表格动态编辑（带示例版）
littlehow的专栏
07-03 4547
该内容很久以前就写了，放在下载频道，csdn自动将分数调至很高，所以今天把里面的内容全部以博客形式写出来
如何使button自动填充table的单元格
The_Best_Hacker的博客
10-09 2316
【题目需求】：如何使button自动填充table的单元格 原代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;计算器&lt;/title&gt; &lt;script&g
javascript将table的td变为可编辑的input，实现表格动态编辑
热门推荐
littlehow的专栏
07-29 2万+
很多场景都会遇到再网页上，用户喜欢像用excel一样，直接对html的table内容进行操作，所以写了个方便使用的插件 csdn下载地址:http://download.csdn.net/detail/w172087242/9589681 下面是javascript代码： /*** * 功能：将只读表格变成可编辑表格 * 支持自定义事件进行编辑 *
攻克 el-table 多列 td 嵌套 el-input type=“textarea” 使 textarea 自适应(autosize) 能自动撑满该行 td 单元格
最新发布
放弃不难，但坚持一定很酷！
03-07 1041
攻克 el-table 多列 td 嵌套 el-input type=“textarea” 使 textarea 自适应(autosize) 能自动撑满该行 td 单元格
input充满整个table表格，input占用的那个表格怎么加长
zhang__1234的博客
01-05 1454
如上图，如果想让上面那个表格长度与下面的绿色方框对齐，修改width="100%"的话不行，结果无变化，需要使用style="width:100%"就行了，不过需要根据图片调节百分比，不一定所有的都是100%。 <input type="text" style="width: 77%;" placeholder="支持QQ号/邮箱/手机号登录"> ...
4、实现一个搜索框，使得input的宽度自适应、按钮宽度固定
sunnnnh的博客
05-10 1796
场景：在写H5移动端的时候，常常会遇到再顶部有搜索框的情况，如下图： 因为要适应不同的移动设备的屏幕宽度，若将所有的元素宽度写死，更换设备后无论是屏幕宽度增大还是缩小，样式一定会乱掉。因此可以将中间输入框的宽度设置为可变的，即可跟随屏 幕宽度的变化而变化，这样就解决适配的问题。 （1）方式一：使用grid布局。 input列 宽度自适应，button列 固定宽度（div可不加宽度，会被input撑开） （2）方式二：使用flex布局 input设置width:100%；butto..
input填充满table表格
碎骨的博客
08-28 8509
之前写表格，input外面是一个td， 这个td的width为整个表的45%，想把input的宽度为占满整个td，也就是整个表的45%，但是input上用width="100%"不行，而使用style=" width:100%"倒是可以，用size=""也可以设置宽度，但是百分比对不上表格的百分比，最后放弃，还是用了&lt;td align="center"&gt;&lt;input type=&quot
table 点击当前数据，文本变成输入框，输入数字后，保存
weixin_45142364的博客
07-26 456
vue修改保存
用CSS对TD中INPUT的宽度设置
09-28
用CSS对每个控件设置宽高。但设置成100%后，会将边框遮住，经过调整，将宽度设置成97%后显示正常，感兴趣的朋友可以参考下
在react项目中使用antd的form组件,动态设置input框的值
01-18
点击保存之后，对表单进行了验证，导致之后请求的数据无法在更新到input框中，也就是说即使在state中有值，也不会更新initialValue值，就导致搜索后的值不能正确填入input中，表单也就提交不了。 解决办法： 不使用...
JQuery EasyUI 日期控件如何控制日期选择区间
01-21
代码如下: <tr><th>发售起始日期</th> <td><input type=”text” id=”usLineTime” name=”usLineTime” size=”20″ class=’easyui-validatebox Wdate’ onFocus=”WdatePicker({el:’usLineTime’,dateFmt:’...
jquery获取tr中控件值并操作tr实现思路
01-19
代码如下: ”1″> <caption> Material/Special Tool Rental/Tool Cantainer/Transportation/Mobile</caption> <tbody><tr> <td> Project No </td> <td> <input type=”hidden” name=”hidProjectInnerID” id=”...
精美前端页面在哪里找
默默的笔记
12-18 1万+
好看的前端都在哪里找呢，看这里！ 下面给大家一个网站，这里面有很多主题形式的 https://www.sitestar.cn/website/combination_templates.aspx?type=all 一、页面筛选 打开页面是这样子的： 在左边可以直接查找到自己比较中意的前端页面，精美模板里面好多都是收费的，在通用模板里面基本上都是不收费的，大家可以随便使用。 二、点击预览 如果遇到...
登录注册页面，JS判断用户手机号码是否已经存在，或者格式不正确
默默的笔记
12-21 1万+
现在的网站使用手机号码注册的越来越多，这就涉及到要在登录注册页面，判断用户手机号码是否已经存在，或者格式不正确，最近的系统里面正好遇到了，已经实现成功，在这里记录一下 如果电话号码已经存在，页面： 如果电话格式不正确，页面： 只有完全成功，符合规则，并且在没有被注册的情况下，才能注册成功 页面如上，现在放代码： 这个号码的验证，我主要放在js里面AJAX请求里面，现在放js...
ueditor编辑器上传图片的显示问题
默默的笔记
12-27 1万+
最近需要做一个标记文章的系统，在网上找到了Ueditor编辑器的代码，修修改改，添加jar包之后已经能运行成功，显示编辑页面。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20181227093232375.png?x-oss-process=image 开始分析问题： 最后发现图片上传出现问题，就是用户上传图片之后，编辑框里面没有显示图片 但是需求是用户上传...
<td> <input id="field_inDate" data-cy="inDate" type="datetime-local" class="form-control" name="inDate" formControlName="inDate" placeholder="YYYY-MM-DD HH:mm" step="86400" /> </td>这么做只是让客户无法操作框内的时分数据但是仍然可以操作时分控件
06-09
是的，你说得对。step 属性只是限制了用户输入的时间精度，但实际上浏览器仍会显示时分控件，用户仍然可以通过控件来选择时分。如果你想完全隐藏掉时分控件，那么可以使用 JavaScript 或者 jQuery 来实现。 以下是一个使用 jQuery 的示例代码： ``` <td> <input id="field_inDate" data-cy="inDate" type="datetime-local" class="form-control hide-time" name="inDate" formControlName="inDate" placeholder="YYYY-MM-DD HH:mm" /> </td> <script> $(function() { // 获取 input 元素 var $input = $('#field_inDate'); // 获取当前时间的日期部分 var date = new Date(); var year = date.getFullYear(); var month = date.getMonth() + 1; var day = date.getDate(); var dateString = year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day); // 设置 input 元素的值为当前时间的日期部分 $input.val(dateString); // 禁用 input 元素的时分控件 $input.on('focus', function() { $(this).prop('type', 'date'); }).on('blur', function() { $(this).prop('type', 'datetime-local'); }); }); </script> <style> .hide-time::-webkit-datetime-edit-fields-wrapper { display: none; } </style> ``` 这里使用了 jQuery 的 $ 函数来获取 input 元素，并在页面加载完成后执行一个回调函数。在回调函数中，首先获取当前时间的日期部分，并将其设置为 input 元素的值。然后，在 input 元素获得焦点时，将其 type 属性设置为 "date"，这样就可以禁用时分控件了。最后，在 input 元素失去焦点时，将其 type 属性设置为 "datetime-local"，以便用户可以再次选择日期和时间。 注意，这里还添加了一些 CSS 样式来将时分控件隐藏，以确保用户无法通过控件选择时分。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值