前段时间写前端，遇到一些模块非常有用，总结以备后用

一.input框字数监听

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <input type="text"  name="wxChoiceInfo.infoTitle" id="wxChoiceInfoInfoTitle" size="120"  onkeyup="countNum(this)"/>
  9. <div id="countNum" style="color: blue">还可输入<span id="num">140</span>个汉字</div>
  10. <script src="static/js/jquery-1.12.4.js"></script>
  11. <script>
  12.     function countNum(e){
  13.             var value=$(e).val();
  14.             var cArr = value.match(/([\u0391-\uffe5])/ig); // 返回中文的字符
  15.             var num=Math.floor((420-value.length-2*(cArr == null ? 0 : cArr.length))/3);
  16.             $("#num").text(num);
  17.             if(num>=0){
  18.                 $("#countNum").css({"color": "#FBBC05"});
  19.             }else{
  20.                 $("#countNum").css({"color": "#EA4335"});
  21.             }
  22.         }
  23. </script>
  24.  
  25. </body>
  26. </html>

二.点输入框显示，点击页面其他地方隐藏功能

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <style>
  7. #div1 {width:400px; height:300px; background:#CCC; display:none;}
  8. </style>
  9. <script>
  10. window.onload=function ()
  11. {
  12.     var oBtn=document.getElementById('btn1');
  13.     var oDiv=document.getElementById('div1');
  14.  
  15.     oBtn.onclick=function (ev)
  16.     {
  17.         var oEvent=ev||event;
  18.         oDiv.style.display='block';
  19.         //alert('按钮被点击了');
  20.  
  21.         oEvent.cancelBubble=true;
  22.     };
  23.  
  24.     document.onclick=function ()
  25.     {
  26.         oDiv.style.display='none';
  27.         //alert('document被点击了');
  28.     };
  29. };
  30. </script>
  31. </head>
  32.  
  33. <body>
  34. <input id="btn1" type="button" value="显示" />
  35. <div id="div1">
  36. </div>
  37. <div id="div2">
  38.  
  39. </div>
  40. </body>
  41. </html>

三.表情框

  1. // QQ表情插件
  2. (function($){
  3.     $.fn.qqFace = function(options){
  4.         var defaults = {
  5.             id : 'facebox',
  6.             path : 'face/',
  7.             assign : 'content',
  8.             tip : 'em_'
  9.         };
  10.         var option = $.extend(defaults, options);
  11.         var assign = $('#'+option.assign);
  12.         var id = option.id;
  13.         var path = option.path;
  14.         var tip = option.tip;
  15.  
  16.         if(assign.length<=0){
  17.             alert('缺少表情赋值对象。');
  18.             return false;
  19.         }
  20.  
  21.         $(this).click(function(e){
  22.             var strFace, labFace;
  23.             if($('#'+id).length<=0){
  24.                 strFace = '<div id="'+id+'" style="position:absolute;display:none;z-index:1000;" class="qqFace">' +
  25.                               '<table border="0" cellspacing="0" cellpadding="0"><tr>';
  26.                 for(var i=1; i<=75; i++){
  27.                     labFace = '['+tip+i+']';
  28.                     strFace += '<td><img src="'+path+i+'.gif" onclick="$(\'#'+option.assign+'\').setCaret();$(\'#'+option.assign+'\').insertAtCaret(\'' + labFace + '\');" /></td>';
  29.                     if( i % 15 == 0 ) strFace += '</tr><tr>';
  30.                 }
  31.                 strFace += '</tr></table></div>';
  32.             }
  33.             $(this).parent().append(strFace);
  34.             var offset = $(this).position();
  35.             var top = offset.top + $(this).outerHeight();
  36.             $('#'+id).css('top',top);
  37.             $('#'+id).css('left',offset.left);
  38.             $('#'+id).show();
  39.             e.stopPropagation();
  40.         });
  41.  
  42.         $(document).click(function(){
  43.             $('#'+id).hide();
  44.             $('#'+id).remove();
  45.         });
  46.     };
  47.  
  48. })(jQuery);
  49.  
  50. jQuery.extend({
  51. unselectContents: function(){
  52.     if(window.getSelection)
  53.         window.getSelection().removeAllRanges();
  54.     else if(document.selection)
  55.         document.selection.empty();
  56.     }
  57. });
  58. jQuery.fn.extend({
  59.     selectContents: function(){
  60.         $(this).each(function(i){
  61.             var node = this;
  62.             var selection, range, doc, win;
  63.             if ((doc = node.ownerDocument) && (win = doc.defaultView) && typeof win.getSelection != 'undefined' && typeof doc.createRange != 'undefined' && (selection = window.getSelection()) && typeof selection.removeAllRanges != 'undefined'){
  64.                 range = doc.createRange();
  65.                 range.selectNode(node);
  66.                 if(i == 0){
  67.                     selection.removeAllRanges();
  68.                 }
  69.                 selection.addRange(range);
  70.             } else if (document.body && typeof document.body.createTextRange != 'undefined' && (range = document.body.createTextRange())){
  71.                 range.moveToElementText(node);
  72.                 range.select();
  73.             }
  74.         });
  75.     }, 
  76.  
  77.     setCaret: function(){
  78.         //if(!$.browser.msie) return;
  79.         var initSetCaret = function(){
  80.             var textObj = $(this).get(0);
  81.             //textObj.caretPos = document.selection.createRange().duplicate();
  82.         };
  83.         $(this).click(initSetCaret).select(initSetCaret).keyup(initSetCaret);
  84.     }, 
  85.  
  86.     insertAtCaret: function(textFeildValue){
  87.         var textObj = $(this).get(0);
  88.         if(document.all && textObj.createTextRange && textObj.caretPos){
  89.             var caretPos=textObj.caretPos;
  90.             caretPos.text = caretPos.text.charAt(caretPos.text.length-1) == '' ?
  91.             textFeildValue+'' : textFeildValue;
  92.         } else if(textObj.setSelectionRange){
  93.             var rangeStart=textObj.selectionStart;
  94.             var rangeEnd=textObj.selectionEnd;
  95.             var tempStr1=textObj.value.substring(0,rangeStart);
  96.             var tempStr2=textObj.value.substring(rangeEnd);
  97.             textObj.value=tempStr1+textFeildValue+tempStr2;
  98.             textObj.focus();
  99.             var len=textFeildValue.length;
  100.             textObj.setSelectionRange(rangeStart+len,rangeStart+len);
  101.             textObj.blur();
  102.         }else{
  103.             textObj.value+=textFeildValue;
  104.         }
  105.     }
  106. });

qqface.js

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <title>qqFace</title>
  7. <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  8. <link rel="stylesheet" href="css/reset.css">
  9. <style>
  10. .comment{width:680px; margin:20px auto; position:relative; background:#fff; padding:20px 50px 50px; border:1px solid #DDD; border-radius:5px;}
  11. .comment h3{height:28px; line-height:28px}
  12. .com_form{width:100%; position:relative}
  13. .input{width:99%; height:60px; border:1px solid #ccc}
  14. .com_form p{height:28px; line-height:28px; position:relative; margin-top:10px;}
  15. span.emotion{width:42px; height:20px;}
  16. span.emotion:hover{background-position:2px -28px}
  17. .qqFace{margin-top:4px;background:#fff;padding:2px;border:1px #dfe6f6 solid;}
  18. .qqFace table td{padding:0px;}
  19. .qqFace table td img{cursor:pointer;border:1px #fff solid;}
  20. .qqFace table td img:hover{border:1px #0066cc solid;}
  21. #show{width:770px; margin:20px auto; background:#fff; padding:5px; border:1px solid #DDD; vertical-align:top;}
  22.  
  23. .sub_btn {
  24.     position:absolute; right:0px; top:0;
  25.     display: inline-block;
  26.     zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
  27.     *display: inline;
  28.     vertical-align: baseline;
  29.     margin: 0 2px;
  30.     outline: none;
  31.     cursor: pointer;
  32.     text-align: center;
  33.     font: 14px/100% Arial, Helvetica, sans-serif;
  34.     padding: .5em 2em .55em;
  35.     text-shadow: 0 1px 1px rgba(0,0,0,.6);
  36.     -webkit-border-radius: 3px;
  37.     -moz-border-radius: 3px;
  38.     border-radius: 3px;
  39.     -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  40.     -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  41.     box-shadow: 0 1px 2px rgba(0,0,0,.2);
  42.     color: #e8f0de;
  43.     border: solid 1px #538312;
  44.     background: #64991e;
  45.     background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
  46.     background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);
  47.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
  48. }
  49. .sub_btn:hover {
  50.     background: #538018;
  51.     background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
  52.     background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);
  53.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
  54. }
  55. </style>
  56. </head>
  57. <body>
  58.      <div id="show"></div>
  59.      <div class="comment">
  60.         <div class="com_form">
  61.             <textarea class="input" id="saytext" ></textarea>
  62.             <p><input type="button" class="sub_btn" value="提交"><span class="emotion">表情</span></p>
  63.         </div>
  64.      </div>    
  65.  
  66. <script  src="js/jquery.min.js"></script>
  67. <script type="text/javascript" src="js/jquery.qqFace.js"></script>
  68. <script type="text/javascript">
  69. $(function(){
  70.     $('.emotion').qqFace({
  71.         id : 'facebox',
  72.         assign:'saytext',
  73.         path:'arclist/'    //表情存放的路径
  74.     });
  75.     $(".sub_btn").click(function(){
  76.         var str = $("#saytext").val();
  77.         $("#show").html(replace_em(str));
  78.     });
  79. });
  80. //查看结果
  81. function replace_em(str){
  82.     str = str.replace(/\</g,'&lt;');
  83.     str = str.replace(/\>/g,'&gt;');
  84.     str = str.replace(/\n/g,'<br/>');
  85.     str = str.replace(/\[em_([0-9]*)\]/g,'<img src="arclist/$1.gif" border="0" />');
  86.     return str;
  87. }
  88. </script>
  89.  
  90. </body>
  91. </html>

四. 文件本地预览上传

  1. function handleFileSelect(evt) {
  2.     var files = evt.target.files;
  3.  
  4.     // Loop through the FileList and render image files as thumbnails.
  5.     for (var i = 0, f; f = files[i]; i++) {
  6.  
  7.       // Only process image files.
  8.       if (!f.type.match('image.*')) {
  9.         continue;
  10.       }
  11.  
  12.       var reader = new FileReader();
  13.  
  14.       // Closure to capture the file information.
  15.       reader.onload = (function(theFile) {
  16.         return function(e) {
  17.           // Render thumbnail.
  18.           var span = document.createElement('span');
  19.           span.innerHTML =
  20.           [
  21.             '<img style="height: 75px; border: 1px solid #000; margin: 5px" src="',
  22.             e.target.result,
  23.             '" title="', escape(theFile.name),
  24.             '"/>'
  25.           ].join('');
  26.  
  27.           document.getElementById('list').insertBefore(span, null);
  28.         };
  29.       })(f);
  30.  
  31.       // Read in the image file as a data URL.
  32.       reader.readAsDataURL(f);
  33.     }
  34.   }
  35.  
  36.   document.getElementById('files').addEventListener('change', handleFileSelect, false);

fileLocalUpload.js

  1. <input type="file" id="files" multiple />
  2. <output id="list"></output>

JS代码实用代码实例（输入框监听，点击显示点击其他地方消失,文件本地预览上传)的更多相关文章

  1. 对百度WebUploader的二次封装,精简前端代码之图片预览上传(两句代码搞定上传)

    前言 本篇文章上一篇: 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传) 此篇是在上面的基础上扩展出来专门上传图片的控件封装. 首先我们看看效果: 正文 使用方式同 ...

  2. js获取base64格式图片预览上传并用php保存到本地服务器指定文件夹

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  3. Ext JS 5的声明式事件监听

    在前文<在Ext JS 5使用ViewControllers>中,简单的介绍了Ext JS 5的一项重要改进——声明式事件监听.在本文,将深度探讨如何使用声明式事件监听啦简化应用程序的视图 ...

  4. js和jquery实现页面滚动监听

    js和jquery实现页面滚动监听 一.总结 一句话总结:onscroll方法和监听页面元素的高度都可以实现滚动监听. 1.onscroll方法实现滚动监听的核心代码是什么? <body ons ...

  5. Linux hostname对Oracle实例以及监听的影响

    在Linux平台中,对hostname的修改,是否对ORACLE数据库实例或监听进程有影响呢?如果有影响,又要如何解决问题呢?另外/etc/hosts下相关内容的修改,是否也会影响实例或监听呢?这里涉 ...

  6. [html5+java]文件异步读取及上传核心代码

    html5+java 文件异步读取及上传关键代码段 功能: 1.多文件文件拖拽上传,file input 多文件选择 2.html5 File Api 异步FormData,blob上传,图片显示 3 ...

  7. 【Azure 应用服务】App Service 在使用GIt本地部署，上传代码的路径为/home/site/repository，而不是站点的根目录/home/site/wwwroot。 这个是因为什么？

    问题描述 App Service 在使用GIt本地部署,上传代码的路径为/home/site/repository,而不是站点的根目录/home/site/wwwroot. 这个是因为什么? 并且通过 ...

  8. 【转】Android开发20——单个监听器监听多个按钮点击事件

    原文网址:http://woshixy.blog.51cto.com/5637578/1093936 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律 ...

  9. 如何使用Git建立本地仓库并上传代码到GitHub

    使用Git建立本地仓库并上传代码到GitHub 工具/原料   电脑安装git客户端.注册github账号并登陆 方法/步骤     到本地项目文件夹右键选择git bash here   输入个人信 ...

随机推荐

  1. 浅谈JAVA集合框架

    浅谈JAVA集合框架 Java提供了数种持有对象的方式,包括语言内置的Array,还有就是utilities中提供的容器类(container classes),又称群集类(collection cl ...

  2. javascript_core_04之数组API

    1.数组API——splice: ①删除:var deletes=arr.splice(starti,n):删除starti位置开始的n个,返回删除元素组成的临时数组: ②插入:arr.splice( ...

  3. CCNA网络工程师学习进程（1）网络的基本概述

        在互联网快速发展的今天,了解互联网成为一项必须的技能,因此在学习编程之余学习如何配置网络还是很有必要的. 本系列博客计划分为三个部分,包括思科CCNA.CCNP和华为的网络工程师认证有关的知识 ...

  4. JS原生第二篇 （帅哥）

    1.1 Javascript 作用  1.  网页特效 2. 用户交互 3. 表单验证 Js  就是可以用来控制   结构  和 样式 . 1.2  体验js   认识常用的三个输出语句.  都属于 ...

  5. ASP.NET MVC 4使用PagedList.Mvc分页

    ASP.NET MVC中进行分页的方式有多种,在NuGet上有提供使用PagedList.PagedList.Mvc进行分页. 1. 通过NuGet引用PagedList.Mvc 在安装引用Paged ...

  6. Symfony2模版引擎使用说明手册

    一.基本使用 {{ demo }}输出一个demo变量; {% func %}通常是包含一个twig函数例如 for; 举个for循环的例子: {% for i in 0..10 %} <em& ...

  7. Android线程之Looper

    之前已经为大家奉献了关于Handler和Message的使用,本篇我们来了解一下Handler内部的具体使用,本篇主要探讨Looper的在处理Handler的消息机制中起的重要作用,我们知道我们在子线 ...

  8. Mybatis之Oracle增删查改示例--转

    http://blog.csdn.net/bingjie1217/article/details/21088431?utm_source=tuicool&utm_medium=referral ...

  9. 决战JS

    经过这几日的学习,测试和摸索,算是了解了一些关于javascript 的相关知识吧.学习过程中做出了一些小DEMO,现总结一下实现这些DEMO的基本思路,如有不妥或更为简便的方法,还希望大神拍砖,共同 ...

  10. SQL Server安全（10/11）：行级别安全（Row-Level Security）

    在保密你的服务器和数据,防备当前复杂的攻击,SQL Server有你需要的一切.但在你能有效使用这些安全功能前,你需要理解你面对的威胁和一些基本的安全概念.这篇文章提供了基础,因此你可以对SQL Se ...