js复文本函数及常用的js验证

2014年8月26日 17120次浏览

我们在做后台发布文章或者输入的时候，通常用复文本框，我前面文章总结了前端常用的复文本，但是，我们在前台用户输入的时候，通常限制复文本的输入，当然，你也可以允许用户用复文本，不过要在提交的时候或者后台对提交的内容进行过滤或者审核。

下面我们来总结一下前端js复文本常用的函数。

下面是斜体、下划线、居中、粗体，插入图片、创建工具条的函数

//斜体
function italicize(obj) {
if (document.selection && document.selection.type == "Text") {
   AddTxt="[i]"+text+"[/i]";
   AddText(obj,AddTxt);
} else {
   txt=prompt('文字将变斜体','文字');
   if (txt!=null) {
    AddTxt="[i]"+txt+"[/i]";
    AddText(obj,AddTxt);
   }
}
}
//下划线
function underline(obj) {
    if (document.selection && document.selection.type == "Text") {
   AddTxt="[u]"+text+"[/u]";
   AddText(obj,AddTxt);
} else {
   txt=prompt('下划线文字','文字');
   if (txt!=null) {
    AddTxt="[u]"+txt+"[/u]";
    AddText(obj,AddTxt);
   }
}
}
//居中
function center(obj) {
   if (document.selection && document.selection.type == "Text") {
   AddTxt="[align=center]"+text+"[/align]";
   AddText(obj,AddTxt);
} else {
   txt2=prompt('对齐样式\n输入 ’center’ 表示居中, ’left’ 表示左对齐, ’right’ 表示右对齐.',"center");
   while ((txt2!="") && (txt2!="center") && (txt2!="left") && (txt2!="right") && (txt2!=null)) {
    txt2=prompt('错误!\n类型只能输入 ’center’ 、 ’left’ 或者 ’right’.',"");
   }
   txt=prompt('要对齐的文本','文字');
   if (txt!=null) {
    AddTxt="[align="+txt2+"]"+txt+"[/align]";
    AddText(obj,AddTxt);
   }
}
}
//粗体
function bold(obj) {
if (document.selection && document.selection.type == "Text") {
   AddTxt="[b]"+text+"[/b]";
   AddText(obj,AddTxt);
} else {
   txt=prompt('文字将被变粗.','文字');
   if (txt!=null) {
    AddTxt="[b]"+txt+"[/b]";
    AddText(obj,AddTxt);
   }
}
}
//插入图片
function insimg(obj){
if (document.selection && document.selection.type == "Text") {
   AddTxt="[img]"+text+"[/img]";
   AddText(obj,AddTxt);
} else {
   txt=prompt('请输入图片完整URL地址:','http://');
   if (txt!=null) {
    AddTxt="[img]"+txt+"[/img]";
    AddText(obj,AddTxt);
   }
}
}

//插入URL
function insurl(obj,is){
if (document.selection && document.selection.type == "Text") {
   AddTxt="[url]"+text+"[/url]";
   AddText(obj,AddTxt);
} else {
   if(is==1){
    txt=prompt('请输入本站站内URL：','http://www.haorooms.com');
   }else{
    txt=prompt('请输入URL地址：','http://');
   }
   if (txt!=null) {
    AddTxt="[url]"+txt+"[/url]";
    AddText(obj,AddTxt);
   }
}
}
//创建工具条
function ToolBars(areaname,isimg,insite){
document.write("<a onClick=\"bold(document.getElementByIdx_xx('"+areaname+"'))\"><img title=\"粗体\" src=\"/image/post1.gif\" ></a>");
document.write(" <a onClick=\"italicize(document.getElementByIdx_xx('"+areaname+"'))\"><img title=\"斜体\" src=\"/image/post2.gif\" ></a>");
document.write(" <a onClick=\"underline(document.getElementByIdx_xx('"+areaname+"'))\"><img title=\"下划线\" src=\"/image/post3.gif\" ></a>");
document.write(" <a onClick=\"center(document.getElementByIdx_xx('"+areaname+"'))\"><img title=\"居中\" src=\"/image/post4.gif\" ></a>");
if(isimg){
   document.write(" <a onClick=\"insimg(document.getElementByIdx_xx('"+areaname+"'))\"><img title=\"插入图片\" src=\"/image/post5.gif\" ></a>");
}
if(insite){
   document.write(" <a onClick=\"insurl(document.getElementByIdx_xx('"+areaname+"'),0)\"><img title=\"插入url\" src=\"/image/post6.gif\" ></a>");
}else{
   document.write(" <a onClick=\"insurl(document.getElementByIdx_xx('"+areaname+"'),1)\"><img title=\"插入url\" src=\"/image/post6.gif\" ></a>");
}
document.write("<br /><a onclick=\"AddText(document.getElementByIdx_xx('"+areaname+"'),'[em=001]')\"><img src=\"/image/em/001.gif\"></a>");
document.write("<a onclick=\"AddText(document.getElementByIdx_xx('"+areaname+"'),'[em=002]')\"><img src=\"/image/em/002.gif\"></a>");
document.write("<a onclick=\"AddText(document.getElementByIdx_xx('"+areaname+"'),'[em=003]')\"><img src=\"/image/em/003.gif\"></a>");
document.write("<a onclick=\"AddText(document.getElementByIdx_xx('"+areaname+"'),'[em=004]')\"><img src=\"/image/em/004.gif\"></a>");
document.write("<a onclick=\"AddText(document.getElementByIdx_xx('"+areaname+"'),'[em=005]')\"><img src=\"/image/em/005.gif\"></a>");
document.write("<a onclick=\"AddText(document.getElementByIdx_xx('"+areaname+"'),'[em=006]')\"><img src=\"/image/em/006.gif\"></a>");
document.write("<a onclick=\"AddText(document.getElementByIdx_xx('"+areaname+"'),'[em=007]')\"><img src=\"/image/em/007.gif\"></a>");
document.write("<a onclick=\"AddText(document.getElementByIdx_xx('"+areaname+"'),'[em=008]')\"><img src=\"/image/em/008.gif\"></a>");
document.write("<a onclick=\"AddText(document.getElementByIdx_xx('"+areaname+"'),'[em=009]')\"><img src=\"/image/em/009.gif\"></a>");
document.write("<a onclick=\"AddText(document.getElementByIdx_xx('"+areaname+"'),'[em=010]')\"><img src=\"/image/em/010.gif\"></a>");
document.write("<a onclick=\"AddText(document.getElementByIdx_xx('"+areaname+"'),'[em=011]')\"><img src=\"/image/em/011.gif\"></a>");
document.write("<a onclick=\"AddText(document.getElementByIdx_xx('"+areaname+"'),'[em=012]')\"><img src=\"/image/em/012.gif\"></a>");
document.write("<a onclick=\"AddText(document.getElementByIdx_xx('"+areaname+"'),'[em=013]')\"><img src=\"/image/em/013.gif\"></a>");
document.write("<a onclick=\"AddText(document.getElementByIdx_xx('"+areaname+"'),'[em=014]')\"><img src=\"/image/em/014.gif\"></a>");
document.write("<a onclick=\"AddText(document.getElementByIdx_xx('"+areaname+"'),'[em=015]')\"><img src=\"/image/em/015.gif\"></a>");
document.write("<a onclick=\"AddText(document.getElementByIdx_xx('"+areaname+"'),'[em=016]')\"><img src=\"/image/em/016.gif\"></a>");
document.write("<a onclick=\"AddText(document.getElementByIdx_xx('"+areaname+"'),'[em=017]')\"><img src=\"/image/em/017.gif\"></a>");
document.write("<a onclick=\"AddText(document.getElementByIdx_xx('"+areaname+"'),'[em=018]')\"><img src=\"/image/em/018.gif\"></a>");
document.write("<a onclick=\"AddText(document.getElementByIdx_xx('"+areaname+"'),'[em=019]')\"><img src=\"/image/em/019.gif\"></a>");
document.write("<a onclick=\"AddText(document.getElementByIdx_xx('"+areaname+"'),'[em=020]')\"><img src=\"/image/em/020.gif\"></a>");
}

注意，用js的selection 对象来监听文字是否选中。用法如上：document.selection

下面来看下复文本的一些验证操作：

//输入数字拦截
function InputNum(event){
//48~57 主键盘数字 96~105 小键盘数字 144 小键盘数字切换键 110 小键盘 点
if((event.keyCode>=48 && event.keyCode<=57) || (event.keyCode>=96 && event.keyCode<=105) || event.keyCode==144 || event.keyCode==110 || event.keyCode==190 || event.keyCode==8 || event.keyCode==46 || event.keyCode==39 || event.keyCode==37 || event.keyCode==13){
   return true;
}else{
   return false;
}
}
//检查输入是否为FLOAT数字
function CheckFloat(obj,pre){
thisfloat=parseFloat(obj.value);
if(isNaN(thisfloat)){
   obj.value="0";
}else{
   obj.value=Math.ceil(thisfloat*Math.pow(10,pre))/Math.pow(10,pre);
}
}
//检查file表单项是否为图片
function CheckImg(ImgFile){
if(ImgFile){
   if(ImgFile.lastIndexOf(".")>=0){
    ext=ImgFile.substr(ImgFile.lastIndexOf(".")).toLowerCase();
    exts="|.jpeg|.jpg|.gif|.png|";
    if(exts.indexOf("|"+ext+"|")<0){
     return false;
    }else{
     return true;
    }
   }else{
    return false;
   }
}else{
   return true;
}
}
//检查图片文件的尺寸
function CheckSize(ImgFile,MaxSize){
if(ImgFile){
   var img=null;
   if(img)img.removeNode(true);
   img=document.createElement_x("img");
   img.style.position="absolute";
   img.style.display="none";
   if(window.attachEvent){
    img.attachEvent("onreadystatechange",orsc);
    img.attachEvent("onerror",oe);
    document.body.insertAdjacentElement("beforeend",img);
   }else{
    img.addEventListener("onreadystatechange",orsc,false);
    img.addEventListener("onerror",oe,false);
    document.body.appendChild(img)
   }

   img.src=ImgFile;
}
function oe(){
   alert("指定图片载入失败");
}
function orsc(){
   if(img.readyState!="complete"){return false;};
   if(parseInt(img.fileSize)>MaxSize*1000){
    alert("当前图片文件 "+img.fileSize/1000+" K\n超过最大限制"+MaxSize+"K\n\n强制提交将可能造成超时失败");
   }
}
}
//获得字节长度
function ByteLength(string){
return string.replace(/[^\x00-\xff]/g,"00").length;
}

除此之外，我们为了让用户避免第二次输入用户名和密码，经常是用cookie来进行用户名的临时存储下面是js读取cookie和写入cookie的操作

//读取Cookie
function getCookie(Name){
var re=new RegExp(Name+"=[^;]+", "i");
if (document.cookie.match(re)){
   return document.cookie.match(re)[0].split("=")[1];
}else{
   return "";
}  
}
//写入COOKIE
function setCookie(name, value){
document.cookie = name+"="+value
}

为了让用户操作爽一些，还有一些快捷键操作，对ctrl+enter的操作等等，如下：

//实现Ctrl+Enter 提交的效果
function QuickPost(event){
if((event.ctrlKey && event.keyCode == 13)||(event.altKey && event.keyCode == 83)){
   event.srcElement.form.submit();
}
}

还有一些简单的js验证和收藏：

//判断用户名是否符合要求
function usernamecheck(string){
if((string.length<4)||(string.length>20)){return false;}
var re;
re=new RegExp("^[a-z|A-Z|0-9][a-z|A-Z|0-9|-]+$");
return re.test(string);
}
//判断密码是否符合规范
function passwordcheck(string){
var re;
re=new RegExp("^[0-9]+$");
return !re.test(string);
}
//收藏指定页面
function addBookmark(title,url) {
if (window.sidebar) {
   window.sidebar.addPanel(title, url,"");
} else if( document.all ) {
   window.external.AddFavorite( url, title);
} else if( window.opera && window.print ) {
   return true;
}
}
//判断字符中是否包含有URL地址
function urlcheck(string){
var re;
re=new RegExp("http://");
return re.test(string.toLowerCase());
}
//判断电子邮箱是否符合规范
function emailcheck(string){
var re;
re=new RegExp("^[\\w-_\\.]+@([a-z|0-9|-]+\\.)+[a-z]{2,5}$");
return re.test(string.toLowerCase());
}
//向某个对象发送一个Click事件
function toclick(objid){
var obj=document.getElementByIdx_xx(objid);
if(document.all){
   obj.fireEvent("onclick");
}else{
     var e=document.createEvent('MouseEvent');
     e.initEvent('click',false,false);
     obj.dispatchEvent(e);
}
}

//判断字符串的字节数
function strlen(string){
       var str="";
       str=string;
       str=str.replace(/[^\x00-\xff]/g,"**");
       return str.length;
}

//一个可以实现key value 功能的对象
function GSArrays(){
   this.keys=new Array();
   this.values=new Array();
   this.set=function (key,value){
    for(i=0;i<this.keys.length;i++){
     if(this.keys[i]==key){
      this.values[i]=value;
      return true;
     }
    }
    this.keys[this.keys.length]=key;
    this.values[this.values.length]=value;
   }
   this.get=function (key){
    for(i=0;i<this.keys.length;i++){
     if(this.keys[i]==key){
      return this.values[i];
     }
    }
   }
}
//将固定格式的Ajax传递数据拆分成 key value 的对象
function SplitToArray(str){
   var strs,tems;
   var MyGs=new GSArrays();
   strs=str.split("\n");
   var arrays=new Array();
   for(i=0;i<strs.length;i++){
    tems=strs[i].split("\t");
    if(tems.length==1){
     MyGs.set(tems[0],"");
    }else if(tems.length==2){
     MyGs.set(tems[0],tems[1]);
    }
   }
   return MyGs;
}

var text = "";
//选框
function getActiveText(selectedtext) {
   text = (document.all) ? document.selection.createRange().text : document.getSelection();
   if (selectedtext.createTextRange) {
     selectedtext.caretPos = document.selection.createRange().duplicate();
   }
return true;
}
//插入文本
function AddText(obj,NewCode)
{
if (obj.createTextRange && obj.caretPos)
{
   var caretPos = obj.caretPos;
   caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? NewCode + ' ' : NewCode;
}
else
{
   obj.value+=NewCode
}
setfocus(obj);
}
//获得焦点
function setfocus(obj)
{
obj.focus();
}

上面就是我对js复文本函数及常用的js验证做的总结，朋友们有什么问题的话，可以相互交流！欢迎留言！

javascript时间戳函数-时间戳总结

javascript execCommand,复文本框神器

Tags: javascript，复文本， js验证， Cookie