input textbox tag
aaarticlea/png;base64,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" alt="" /> 1 <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>textTag</title>
<style>
.box{border:1px solid #ddd; overflow: hidden;padding-bottom:10px; cursor:pointer;}
.box .list{float:left;}
.box p{float:left; padding:5px; background-color:rgba(235, 140, 0, 0.46); border:1px solid #e7eceb; margin:9px 10px 0; position:relative; margin-left:10px;}
.box p a{ display:block; width:15px; height:15px; background:#eb8c00; font-size:8px; position:absolute; text-align:center; line-height:17px; color:#fff; text-decoration:none; border-radius:10px; right:-5px; top:-5px;}
.box input{float:left; height:30px; border:none;margin-left: 10px; margin-top:12px; border: none;outline:none}
.box div{float:right; margin-bottom:0px;}
.box .tip{border:1px solid #eb8c00 !important}
</style>
</head>
<body>
<div class="box" id="ccc"></div>
<input type="button" value="getValue" onclick="getValue()"> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.js"></script>
<script> (function () {
var tag = { init: function (cfg) {
this.obj = cfg.id;
this.reg = cfg.reg;
this.createElement();
},
createElement: function () {
var oInput = "<input type='text' class='edit' style='border:none' />";
if ($(this.obj).length == 0) throw new Error('元素不存在');
$(this.obj).append(oInput);
this.addEvent();
},
addEvent: function () {
var _this = this;
$(this.obj).click(function () {
$(this).find('input').focus().css('border', 'none');
})
$(document).delegate('.edit', 'keyup', function (event) {
if (event.keyCode == 13 || event.keyCode == 32) {
var txt = $(this).val().trim();
if (_this.reg != '') {
var patt = new RegExp(_this.reg);
if (!patt.test(txt)) {
$(this).addClass("tip")
return;
}
}
$(this).removeClass("tip")
if (txt != '') {
_this.createTag($(this), txt)
}
$(this).val('');
}
})
$(document).delegate('.closed', 'click', function () {
$(this).parent().remove();
})
},
createTag: function (obj, txt) {
var oP = "<p><a class='closed' href='javascript:;''>x</a><span>" + txt + "</span></p>";
obj.before(oP);
},
getvalues: function () {
var list = $(this.obj).children("p").children('span');
var content = [];
for (var i = 0; i < list.length; i++) {
content.push(list[i].innerHTML);
}
return content.join(',')
},
setvalues: function (p) {
$(this.obj).find('p').remove();
if (p != null && p.trim() != '') {
var ps = p.split(',');
for (var i = 0; i < ps.length ; i++) {
this.createTag($(this.obj).find('input'), ps[i]);
}
}
}
}
window.textTag = tag;
})(window); textTag.init({
id:"#ccc",
reg:/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
}) function getValue(){
alert(textTag.getvalues());
} </script>
</body>
</html>
input textbox tag的更多相关文章
- DER input, Integer tag error的异常处理
1.首先我向大家介绍一下我做的东西,发生这个异常的情况. 我做的是一个电签的系统,在调用某公司的API生成证书,然后与安证通进行同步证书的任务. 2.问题具体的异常 具体异常如下: 2016/08/2 ...
- 支付宝APP支付开发- IOException : DER input, Integer tag error
支付宝APP支付Java开发报错: 1 java.security.spec.InvalidKeySpecException: java.security.InvalidKeyException: I ...
- CVS 文件自动移 tag 的 Python 脚本
CVS 文件自动移 tag 的 Python 脚本 背景 工作中使用的版本管理工具是 CVS,在两次发布中,如果修改的文件比较少,会选择用移 Tag 的方式来生成一个新 Tag 发布.文件比较少的情况 ...
- WPF用样式实现TextBox的虚拟提示效果
[版权声明]本文为博主原创,未经允许禁止用作商业用途,如有转载请注明出处. 话说好多软件和网站都能实现虚拟提示,好吧这个名词是我自己起的,因为我也不知道这么形容这个效果. 效果描述:在TextBox没 ...
- Python+Selenium 利用ID，XPath，tag name，link text，partial link text，class name，css，name定位元素
使用firefox浏览器,查看页面元素,我们以“百度网页”为示例 一.ID定位元素 利用find_element_by_id()方法来定位网页元素对象 ①.定位百度首页,输入框的元素 ②.编写示 ...
- 转:[web]javascript 增加表單的input
利用javascript增加form的input 這是js的部份 //用來區分不同input的name var element_count = 0; function add_element(obj) ...
- Python+Selenium练习篇之3-利用tag name定位元素
前一篇文章介绍了如何通过元素的id值来定位web元素,本文介绍如何通过tag name来定位元素.个人认为,通过tag name来定位还是有很大缺陷,定位不够精确.主要是tag name有很多重复的, ...
- Professional C# 6 and .NET Core 1.0 - Chapter 41 ASP.NET MVC
What's In This Chapter? Features of ASP.NET MVC 6 Routing Creating Controllers Creating Views Valida ...
- C# 6 与 .NET Core 1.0 高级编程 - 41 ASP.NET MVC（中）
译文,个人原创,转载请注明出处(C# 6 与 .NET Core 1.0 高级编程 - 41 ASP.NET MVC(中)),不对的地方欢迎指出与交流. 章节出自<Professional C# ...
随机推荐
- 三个数组求中位数，以及中位数的中位数----java算法实现
求三个数组的中位数,以及中位数的中位数. import java.util.Arrays; public class median { public static void main(String ...
- mysql into outfile 和 load data local备份还原
在 my.ini 的 [mysqld] 节点增加如下配置: secure-file-priv="D:/mysql_secure_file" max_allowed_packet= ...
- 6.iptables常用规则
开启ip段192.168.1.0/24端的80口 开启ip段211.123.16.123/24端ip段的80口 # iptables -I INPUT -p tcp --dport 80 -j DRO ...
- while循环/格式化输出/ 逻辑运算/ 编码 /单位转换
一.while 循环 1. 循环 while 条件: 代码块(循环体) else: 当上面的条件为假. 才会执行 执行顺序: 判断条件是否为真. 如果真. 执行循环体. 然后再次判断条件....直到循 ...
- ACM-ICPC 2018北京网络赛-A题 Saving Tang Monk II-优先队列
做法:优先队列模板题,按步数从小到大为优先级,PASS掉曾经以相同氧气瓶走过的地方就好了 题目1 : Saving Tang Monk II 时间限制:1000ms 单点时限:1000ms 内存限制: ...
- [ActionSprit 3.0] FMS安装与测试
1.运行Flash Media Server4.5.exe,安装选项可全默认,序列号可不填:输入用户名和密码需记住,登录时要用. 2.安装完成,在安装目录C:\Program Files\Adobe\ ...
- 7，CountDownLatch 与 CyclicBarrier 的 区别
CountDownLatch : 一个同步辅助类,在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待. 用给定的计数 初始化 CountDownLatch.由于调用了 countDo ...
- jquery中的正则表达式
1.什么是正则表达式: 能让计算机读懂的字符串匹配规则. 2.正则表达式的写法: var re=new RegExp('规则', '可选参数');var re=/规则/修饰参数; 3.规则中的字符 1 ...
- [转] iOS 在UILabel显示不同的字体和颜色
在项目开发中,我们经常会遇到在这样一种情形:在一个UILabel 使用不同的颜色或不同的字体来体现字符串,在iOS 6 以后我们可以很轻松的实现这一点,官方的API 为我们提供了UILabel类的at ...
- 编写高质量代码:Web前端开发修炼之道（二）
第四章:高质量的css 1)怪异模式和标准模式 在标准模式中,浏览器根据规范表现页面:而怪异模式通常模拟老式浏览器的行为以防止老站点无法工作. 他们两者之间的差异比较典型的表现在IE对盒模型的解析:在 ...