Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法


Posted in Javascript onJune 23, 2016

今天项目经理刚交给一个活儿,要我实现这样一个功能:要实现的是验证码文本框变窄一点,然后右边加入一副验证码图片,并且在响应式布局的情况下在移动端访问的时候验证码图片能保持和验证码文本框在同一行,这个怎么做?难为了半天,后来找到了实现思路,下面小编把我的想法及实现过程分享给大家,有问题欢迎提出,共同学习进步!

Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法

实现思路:

实现效果图

Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法

自己往里面加入bootstrap的栅格布局代码,控制在不同分辨率下面的排布情况。

这样实现唯一的前提条件就是你的验证码图片高度需要和input框的高度一样(input框的高度大概是34px)。

之后就简单了,让验证码图片重叠在input框上面,使用绝对布局就可以完成。

PS:记住要给input框加上一个padding-left值(略微大于你的验证码宽度即可),不然会挡住文字。

<style>
#captcha {
border-radius: 2px;
cursor: pointer;
position: absolute;
z-index: 3;
left: 0;
top: 0;
}

#validateCode {
padding-left: 110px;
}
</style>
<div class="form-group col-md-6">
<label for="validateCode">验证码
<small>  点击图片刷新验证码</small>
</label>
<div class="input-group">
<img id="captcha"
src='data:image/png;base64,{{Captcha::doimg()['imgCode']}}'>
<input type="text" class="form-control"
id="validateCode" name="validateCode"
placeholder="四位字符验证码">
</div>
</div>

给题主看看我的解决办法,这是我在写的一个网站,图片的大小是契合Input框的高度的,无需更改input宽度,让验证码图片遮住input框即可,然后给input加一个padding-left值,大小略大于验证码图片宽度即可,手机答题不方便,回去再细说。

以上所述是小编给大家介绍的Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用javascript实现无刷新更新数据的详细步骤 asp
Dec 26 Javascript
jquery遍历input取得input的name
Apr 27 Javascript
字段太多jquey快速清空表单内容方法
Aug 21 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
jQuery的ready方法实现原理分析
Oct 26 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
Vue.js教程之axios与网络传输的学习实践
Apr 29 Javascript
基于jQuery的表单填充实例
Aug 22 jQuery
webpack4+express+mongodb+vue实现增删改查的示例
Nov 08 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 Javascript
vue中使用echarts的示例
Jan 03 Vue.js
JS使用JSON作为参数实例分析
Jun 23 #Javascript
浅析Bootstrap表格的使用
Jun 23 #Javascript
浅析Bootstrap验证控件的使用
Jun 23 #Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 #Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 #Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 #Javascript
每日十条JavaScript经验技巧(二)
Jun 23 #Javascript
You might like
PHP 压缩文件夹的类代码
2009/11/05 PHP
php模拟js函数unescape的函数代码
2012/10/20 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
MacOS 安装 PHP的图片裁剪扩展Tclip
2015/03/25 PHP
php实现scws中文分词搜索的方法
2015/12/25 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
最基础的vue.js双向绑定操作
2017/08/23 Javascript
javascript标准库(js的标准内置对象)总结
2018/05/26 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
从零到一详聊创建Vue工程及遇到的常见问题
2019/04/25 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
Centos5.x下升级python到python2.7版本教程
2015/02/14 Python
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
Python 两个列表的差集、并集和交集实现代码
2016/09/21 Python
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
python自动化脚本安装指定版本python环境详解
2017/09/14 Python
PyQt5实现拖放功能
2018/04/25 Python
Python调用C++,通过Pybind11制作Python接口
2018/10/16 Python
解决pycharm py文件运行后停止按钮变成了灰色的问题
2018/11/29 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
pycharm 激活码及使用方式的详细教程
2020/05/12 Python
Python的Django框架实现数据库查询(不返回QuerySet的方法)
2020/05/19 Python
经贸韩语专业大学生职业规划
2014/02/14 职场文书
年会搞笑主持词
2014/03/27 职场文书
Python Numpy之linspace用法说明
2021/04/17 Python
详解MySQL的内连接和外连接
2023/05/08 MySQL