Jquery动态添加输入框的方法

本文实例讲述了Jquery动态添加输入框的方法。分享给大家供大家参考。具体实现方法如下:

<!-- 页头 -->
<#include "../common/head.ftl">
<div id="onFailureDiv" class="alert alert-danger navbar-fixed-top" style="text-align:center; display:none"></div>
<div class="container" style="min-height:100%; height:100%;margin-top:100px;">
<form id="addressForm" class="form-horizontal" method="post" action="/restaurant/${(user.userId)}/addAddress">
  <div class="form-group dynamic-collection" id="course-goals-form-group">
  <div class="col-md-2 control-label"><label>地址</label></div>
  <div class="col-md-8 controls">
   <ul id="ItemCourseList" class="list-group sortable-list" data-role="list" style="margin-bottom:10px;"></ul>
   <div class="input-group">
   <input id="courseInput" type="text" data-role="item-input" class="form-control">
   <span class="input-group-btn">
    <button id="addItemCourse" class="btn btn-default" type="button" data-role="item-add" >添加</button>
   </span>
   </div>
  </div>
  </div>
 </form>
<!-- container -->
</div>
<script type="text/javascript" src="${app.basePath}/resources/js/jquery.form.js"></script>
<script>
 $.schoolFn = {
 addCourseItem: function(obj){
  $("#ItemCourseList").append("<li class='list-group-item clearfix'><span class='glyphicon glyphicon-resize-vertical sort-handle'></span>"+obj+"<input type='hidden' name='goals' value='"+obj+"'><button type='button' class='close delete-btn deleteItem' onclick='deleteCourseItem(this);' title='删除'>×</button></li>");
 },
 addItem: function(obj){
  $("#itemList").append("<li class='list-group-item clearfix'><span class='glyphicon glyphicon-resize-vertical sort-handle'></span>"+obj+"<input type='hidden' name='audiences' value='"+obj+"'><button type='button' class='close delete-btn deleteItem' onclick='deleteItem(this);' title='删除'>×</button></li>");
 },
 }
 $("#addItemCourse").click(function(){
  var item=$('#courseInput').val();
  if(item.trim()==""){
  $('#courseInput').val("");
  }else{
  $.schoolFn.addCourseItem(item);
  $('#courseInput').val("");
  }
 });
 function deleteCourseItem(obj){
  $(obj).parent().replaceWith("");
 }
</script>
<script>
 $(document).ready(function(){
  $('#addressForm').ajaxForm(function(json) {
   if(json.status == "success") {
    $("#onFailureDiv").html("添加成功").slideDown().delay(3000).hide(1000);
   }else {
    $("#onFailureDiv").html(json.errorMsg).slideDown().delay(3000).hide(1000);
   }
  });
 });
</script>
<!-- 页脚 -->
<#include "../common/footer.ftl"/>

效果图如下:

希望本文所述对大家的jQuery程序设计有所帮助。

时间: 2015-05-27

jquery 实现密码框的显示与隐藏示例代码

复制代码 代码如下: <html> <head> <script type="text/javascript" src="jquery-1.5.1.min.js"></script> <script type="text/javascript"> $(function(){ $("#chk").bind({ click: function(){ if($(this).

jquery控制表单输入框显示默认值的方法

本文实例讲述了jquery控制表单输入框显示默认值的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <head> <script language="javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(document)

jQuery实现的输入框选择时间插件用法实例

本文实例讲述了jQuery实现的输入框选择时间插件用法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!dooCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta charset = utf8> <

jQuery判断密码强度实现思路及代码

复制代码 代码如下: <head> <title></title> <script src="jquery-1.9.1.js" type="text/javascript"></script> <style type="text/css"> .qiang{background:url(/images/pas4.JPG) no-repeat;width:150px;height

jquery实现输入框实时输入触发事件代码

话不多说,请看代码 $('.aa').bind('input propertychange', function() { searchProductClassbyName(); }); function searchProductClassbyName() { 写函数内容 } 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!

IE下支持文本框和密码框placeholder效果的JQuery插件分享

很久之前写了这个插件,基于jQuery实现的,主要用于IE下实现placeholder效果,可同时支持文本和密码输入框. placeholder是HTML5新增的一个属性,当input设置了该属性后,该值的内容将作为灰色提示显示在文本框中,当文本框获得焦点时,提示文字消失. 下载地址:http://xiazai.jb51.net/201501/other/placeholderfriend.rar 实现代码如下: 复制代码 代码如下: (function($) {   /**    * 没有开花

js与jquery实时监听输入框值的oninput与onpropertychange方法

本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监听文本框 value 值的变化,然后匹配相关内容. 初接项目,首先想到的是 JQ 里的 change,但是马上排除此方法,因为 change 是在文本框失去焦点时才会触发.曲线救国一下,想到用 keydown 来解决.其他一切还好,只是当不通过键盘操作,而是通过鼠标来复制粘贴时,这个事件是无法触发

JQuery记住用户名和密码的具体实现

复制代码 代码如下: <div> <input id="username" type="text" class="txt1" value="请输入用户名" onclick="if(this.value=='请输入用户名'){this.value=''; }" onfocus="if(this.value=='请输入用户名'){this.value=''; }" />

密码框显示提示文字jquery示例

复制代码 代码如下: <html> <head> <title>登录</title> <script type="text/javascript" src="./jquery-1.3.2.min.js"></script> <script> $(document).ready(function(){ $(".text_login").focus(function(

jQuery实现6位数字密码输入框

下个月就要过年了,感觉有点瞎忙.翻了翻博客,感觉这个月都在打酱油啊.借口那么多,其实真的有点懒了,呵呵! 我争取在放假前,将自我总结以及来年计划发出来,把自己打造为勉族,不然真要浑噩度日了. 前几天,项目有个功能和某宝购物支付密码的输入框有点类似,就自己写了这篇博文,权当总结笔记吧. 啰嗦半天了,直接上代码: 结构层: <div> <div>请在下方输入6位数字</div> <div class="ipt-box-nick"> <i

JavaScript仿支付宝6位数字密码输入框

前几天,项目有个功能和某宝购物支付密码的输入框有点类似,就自己写了这篇博文,权当总结笔记吧. 啰嗦半天了,直接上代码: 结构层: <div> <div>请在下方输入6位数字</div> <div class="ipt-box-nick"> <input type="tel" maxlength="6" class="ipt-real-nick"/> <div c

JS填写银行卡号每隔4位数字加一个空格

1.原生js写法 !function () { document.getElementById('bankCard').onkeyup = function (event) { var v = this.value; if(/\S{5}/.test(v)){ this.value = v.replace(/\s/g, '').replace(/(.{4})/g, "$1 "); } }; }(); 2.jQuery写法 <!DOCTYPE html> <html la

JavaScript实现淘宝京东6位数字支付密码效果

京东淘宝的密码输入框功能点 只能输入数字 只能输入6位字符 每次输入一个字符,对应位置的小黑点显示 每次删除一个字符,对应位置的小黑点消失 实现思路 1.写好6位密码输入框的静态样式和html结构 2.将密码输入框input定位到父容器,覆盖之前写好的6位密码输入框区域,并设置为透明 3.虽然设置了密码输入框为透明,但当密码输入框获得焦点的时候,输入框的光标会显示出来,并不是透明状态.为了解决这个问题,暂时想到了两种方法,第一种,利用css将光标也设置为透明,不过这种方法有一定的兼容问题:第二种

基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)

废话不多说了,先给大家展示下效果图,感兴趣的朋友继续往下看 哦 查看演示       源码下载 HTML 和上一篇文章:使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构,只是多了个>date用来展示日期和星期的. <div id="clock" class="light"> <div class="display"> <div class="date"></

php生成4位数字验证码的实现代码

在php中实现验证码还是很方便的,关键点在于掌握php gd库与session的用法. 纵观网上php 生成验证码的例子,无不是php gd库与session相结合,并利用php 生成随机数的方法来完成. PHP验证码,可以分为很多种,包括 php 图片验证码,php 随机验证码,以及php 中文验证码等,根据不同的应用场合来使用不同的验证码. 这里分享一个php数字验证码,供大家参考. 4位数字验证码 /* *Filename:authpage.php */ session_start();

jQuery+PHP实现动态数字展示特效

HTML 本例假设要在页面上动态展示(无需刷新整个页面,只是局部刷新动态数字)当前在线用户数,常见在一些统计平台上应用.在HTML页面中只需定义以下结构: 复制代码 代码如下: <div class="count">当前在线:<span id="number"></span></div> jQuery 首先我们要定义一个动画过程,使用jQuery的animate()函数实现从一个数字到另一个数字的变换过程,以下magi

Java实现n位数字的全排列

n位数字的全排列共有n!种. 本排列只对字符型数字排列进行输出,输出的是字符型数字.这种问题一般都需要用递归的方法. java代码如下: public class Test { static int k=0; public static void main(String[] args) { int a[]={1,2,3,4,5}; permutations(a,0,4); } public static void permutations(int[]a,int m,int n){ if(m==n

微信小程序6位或多位验证码密码输入框功能的实现代码

在做小程序过程中做一个6位验证码输入框,本以为很简单,但是在写的时候遇到各种各样的阻力,在网上查阅资料也寥寥无几,后来经过一番思考,终于敲定下来本人最满意的方案,特意发出来让大家参考一下,希望能帮到大家! 一.效果图如下: 二.代码部分 wxml: <form bindsubmit="formSubmit"> <view class='content'> <block wx:for="{{Length}}" wx:key="i

vue实现输入一位数字转汉字功能

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJR