input标签附带提示文字（bootstrap里面输入框的两侧同时添加额外元素）

最新推荐文章于 2022-10-12 10:23:31 发布
VIP文章 最新推荐文章于 2022-10-12 10:23:31 发布
阅读量1.4k 收藏
点赞数
原文链接：http://www.cnblogs.com/songForU/p/10530450.html
版权

一直不太喜欢用定位，今天写界面的时候，要在输入框右边添加默认的元素符号。

第一次尝试，因为本身项目用的是bootstrap所以就想利用输入框的两侧同时添加额外元素。

但是写了代码发现效果不同。

第二次直接将input里的text-align:right；改成了从右边开始。这样导致的是，所有输入从右边开始，并不是我想要的。

第三次使用定位解决问题，

  <div class="form-group input-group-sm addon-position">
   <span class="star-red red-left">*</span>
最低0.47元/天 解锁文章
dengling4813
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
10-22
主要介绍了基于Bootstrap使用jQuery实现输入框组input-group的添加与删除的相关资料,需要的朋友可以参考下
bootstrap+typeahead实现输入提示功能
风轻云淡，笑看人生得失！
09-26 2755
//获取所有公司 function getCorps(urlC,urlD,corp,dept){     corp.empty();     $.post(urlC, function(list) {         var datas = new Array();         if (list&&list.length > 0) {             for(var i=0
输入框实时提示可输入字符数
sinat_15051577的博客
03-24 711
业务提了个需求，要求在输入框输入经营范围时，实时提示尚可输入的字符数。 因为前端主要使用Bootstrap,最开始思路看Bootstrap的表单验证插件有没有提供类似的功能。BootStrap提供的验证常见有： notEmpty(非空) stringLength（字符限制） regexp（正则匹配） different（不一致校验） identical（一致校验）等等。 没有我们想要的内容。后...
bootstrap仿百度输入框智能提示（提示信息存在于数据库中）
Hero_QHZ的博客
03-24 7969
示例图片： 百度示例 所实现示例 jsp： 缴费单位名称* <input type="text" value="${list.companyName}" id="companyName" name="companyName" onclick="autosearchCargono()" class="col-
多行文本框textarea的字数控制动态提示。(剩余字数提醒)
shadow_zed的博客
04-19 2141
&lt;script type="text/javascript"&gt;          //多行文本输入框剩余字数计算          function checkMaxInput(obj, maxLen) {              if (obj == null || obj == undefined || obj == "") {                  return; ...
html input tooltip,BootStrap tooltip提示框使用小结
weixin_35457696的博客
06-10 1014
提示框提示框的基本使用方式为：test messagedata-original-title可以直接写为title,仍然能正常使用，源码中优先查找前者，前者不存在就会查找title提示框不提供HTML触发方式只能通过JS来进行触发：$("[data-toggle='tooltip']").tooltip();提示框的关键属性为data-original-title="content",该属性就是我...
js只能输入数字［价格等］
u014712365的博客
03-19 134
1.文本框只能输入数字代码(小数点也不能输入)<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"> 2.只能输入数字,能输小数点.<input onkeyup="if(isNaN(value))execCom...
【bootstrap】简单输入框
weixin_45096185的博客
01-11 774
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/> <title>
Bootstrap——提示框、提示冒泡
xun__xing的博客
07-31 1632
提示框、提示信息一、提示框1.基本2.方向3.禁用元素弹出提示框4.焦点失去5.data属性6.方法与事件二、提示冒泡1.基础2.方向3.禁用4.data属性5.方法与事件 一、提示框 1.基本 <div class="row mt-5"> <div class="col"> <button class="btn btn-danger" data-toggle="popover" title="这里放的是提示框的标题" data-content="这里放的是提示框的内容"
input文本框中输入内容，将输入的内容通过点击“添加”按钮后添加到div中；点击添加的内容能随机改变其字体颜色
qq_56244419的博客
10-12 1050
在input文本框中输入要添加的文本,添加完成后点击添加的文本能改变其字体颜色,当鼠标点击另外一个文本的时候,第一个点击的文本能回复默认。点击添加的内容能随机改变其字体颜色。
bootstrap输入提示的使用及格式
.
08-17 6755
最近玩了一下前台的开发框架，挺不错的，简洁美观，功能也很齐全。 在做一个踢出在线用户功能时，做了两个踢出的方法，一个直接在用户后面就可以踢出，另一可以输入框输入提示补全，然后再踢出，这是就用到了下拉提示。它要求的格式极为苛刻一定要[“aaa”,"bbb","ccc"]这种格式，双引号改为单引号都不行，本想利用js里面的数组，可是格式不符合，只能一点自己慢慢转换咯。 先看一下前台的踢出用
Bootstrap3 input输入框插入glyphicon图标的方法
12-28
bootstrap3如何在input输入框插入glyphicon图标呢？插入图标看起来比较醒目，满足用户体验价值观，此功能应用于各大网站。 怎么把图标放在输入框的开头？？ 用户名 <span class=glyphicon></span> <input ...
bootstrap布局中input输入框右侧图标点击功能
09-02
主要为大家详细介绍了bootstrap布局中input输入框右侧图标点击功能实现的相关代码，感兴趣的小伙伴们可以参考一下
自动驾驶运动规划(Motion Planning).pdf
04-26
自动驾驶运动规划(Motion Planning)问题分析
财务数据分析模型6.xlsx
04-26
Excel数据看板，Excel办公模板，Excel模板下载，Excel数据统计，数据展示
人力资源数据分析看版.xlsx
04-26
Excel数据看板，Excel办公模板，Excel模板下载，Excel数据统计，数据展示
重庆大学2011-2012(2)数字电子技术II.pdf
04-26
重庆大学期末考试试卷，重大期末考试试题，试题及答案
随波逐流CTF编码工具 V5.6 20240424.rar
04-26
由随波逐编写开发，CTF编码工具为用户提供丰富的离线加密解密功能，还可以对字符编码进行转换，文件隐写查看，用户可以根据自己的需求来使用功能，非常实用，能够提高大家的工作效率！
重庆大学电磁场原理08年考题(A）.pdf
最新发布
04-26
重庆大学期末考试试卷，重大期末考试试题，试题及答案
bootstrap 动态添加表单元素input
06-01
要在 Bootstrap 中动态添加表单元素 input，可以按照以下步骤操作： 1. 创建一个空的表单组： ```html <form id="myForm"> </form> ``` 2. 使用 jQuery 在表单组中添加 input 元素： ```javascript var input = '<input type="text" name="myInput" class="form-control">'; $('#myForm').append(input); ``` 3. 可以按照需要设置 input 元素的属性，例如 placeholder、id 或 value： ```javascript var input = '<input type="text" name="myInput" class="form-control" placeholder="Enter your name" id="nameInput" value="">'; $('#myForm').append(input); ``` 这样，就可以根据需要动态添加表单元素 input。如果需要添加多个 input 元素，可以在循环中执行上述步骤。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值