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# ...
随机推荐
- Starling开源手势库AcheGesture
http://news.9ria.com/2012/1220/25686.html AcheGesture -一个Flash的开源框架 特点: 提供7个基本的手势,包括:单击.双击.捏.来回滑动.猛击 ...
- webstorm中新建vue工程
1.在https://nodejs.org/en/下载安装nodejs 2.vue-cli 搭建框架 首先从官方网站安装 node.js,会一并安装 npm工具.注意 npm一定要3.10以上,以免很 ...
- StratifiedShuffleSplit（）函数 实现对数据集的划分
sklearn.model_selection.StratifiedShuffleSplit(n_splits=10, test_size=’default’, train_size=None, ra ...
- offsetWidth和width的区别
1.offsetWidth属性可以返回对象的padding+border+width属性值之和,style.width返回值就是定义的width属性值. 2.offsetWidth属性仅是可读属性,而 ...
- 洛谷P3616 富金森林公园
题目描述 博艾的富金森林公园里有一个长长的富金山脉,山脉是由一块块巨石并列构成的,编号从1到N.每一个巨石有一个海拔高度.而这个山脉又在一个盆地中,盆地里可能会积水,积水也有一个海拔高度,所有严格低于 ...
- AHOI2005航线规划 bzoj1969（LCT缩点）
题目描述 对Samuel星球的探险已经取得了非常巨大的成就,于是科学家们将目光投向了Samuel星球所在的星系——一个巨大的由千百万星球构成的Samuel星系. 星际空间站的Samuel II巨型计算 ...
- Elasticsearch C# NEST IndexMany Children
foreach (IEnumerable<object> batch in objects.Batch(1000)) { var indexResponse = client.Bulk(s ...
- 4，临界区 之 synchronized
前提背景:多个并发线程共享同一个资源时,为防止这些共享资源可能出现的错误或数据不一致问题,提出了临界区的概念 临界区: 指一个用以访问共享资源的代码块,这个代码块在同一时间内只能允许一个线程访问 实现 ...
- classnofoundexception:org.springframework.ui.freemarker.FreeMarkerConfigurationFactory
这个是在整合freemarker的时候出现的问题,在添加依赖spring-context-support.jar之后就好了 但是我在搭建框架的时候出现的问题是明明添加了这个依赖,但是出现一个问题 出现 ...
- 无法下载APP
最近遇见下面的情况两次,各种搜索过资料,但是都没什么结果,把自己的解决方法分享如下: 实践证明,出现这个问题,应该是出现了下面几方面原因: 第一次遇见上述问题,是年后来到公司接手了新项目,然后不久传来 ...