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

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

一.input框字数监听

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<input type="text"  name="wxChoiceInfo.infoTitle" id="wxChoiceInfoInfoTitle" size="120"  onkeyup="countNum(this)"/>

<div id="countNum" style="color: blue">还可输入<span id="num">140</span>个汉字</div>

<script src="static/js/jquery-1.12.4.js"></script>

<script>

    function countNum(e){

            var value=$(e).val();

            var cArr = value.match(/([\u0391-\uffe5])/ig); // 返回中文的字符

            var num=Math.floor((420-value.length-2*(cArr == null ? 0 : cArr.length))/3);

            $("#num").text(num);

            if(num>=0){

                $("#countNum").css({"color": "#FBBC05"});

            }else{

                $("#countNum").css({"color": "#EA4335"});

            }

        }

</script>

</body>

</html>

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

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

#div1 {width:400px; height:300px; background:#CCC; display:none;}

</style>

<script>

window.onload=function ()

{

    var oBtn=document.getElementById('btn1');

    var oDiv=document.getElementById('div1');

    oBtn.onclick=function (ev)

    {

        var oEvent=ev||event;

        oDiv.style.display='block';

        //alert('按钮被点击了');

        oEvent.cancelBubble=true;

    };

    document.onclick=function ()

    {

        oDiv.style.display='none';

        //alert('document被点击了');

    };

};

</script>

</head>

<body>

<input id="btn1" type="button" value="显示" />

<div id="div1">

</div>

<div id="div2">

</div>

</body>

</html>

三.表情框

// QQ表情插件

(function($){

    $.fn.qqFace = function(options){

        var defaults = {

            id : 'facebox',

            path : 'face/',

            assign : 'content',

            tip : 'em_'

        };

        var option = $.extend(defaults, options);

        var assign = $('#'+option.assign);

        var id = option.id;

        var path = option.path;

        var tip = option.tip;

        if(assign.length<=0){

            alert('缺少表情赋值对象。');

            return false;

        }

        $(this).click(function(e){

            var strFace, labFace;

            if($('#'+id).length<=0){

                strFace = '<div id="'+id+'" style="position:absolute;display:none;z-index:1000;" class="qqFace">' +

                              '<table border="0" cellspacing="0" cellpadding="0"><tr>';

                for(var i=1; i<=75; i++){

                    labFace = '['+tip+i+']';

                    strFace += '<td><img src="'+path+i+'.gif" onclick="$(\'#'+option.assign+'\').setCaret();$(\'#'+option.assign+'\').insertAtCaret(\'' + labFace + '\');" /></td>';

                    if( i % 15 == 0 ) strFace += '</tr><tr>';

                }

                strFace += '</tr></table></div>';

            }

            $(this).parent().append(strFace);

            var offset = $(this).position();

            var top = offset.top + $(this).outerHeight();

            $('#'+id).css('top',top);

            $('#'+id).css('left',offset.left);

            $('#'+id).show();

            e.stopPropagation();

        });

        $(document).click(function(){

            $('#'+id).hide();

            $('#'+id).remove();

        });

    };

})(jQuery);

jQuery.extend({

unselectContents: function(){

    if(window.getSelection)

        window.getSelection().removeAllRanges();

    else if(document.selection)

        document.selection.empty();

    }

});

jQuery.fn.extend({

    selectContents: function(){

        $(this).each(function(i){

            var node = this;

            var selection, range, doc, win;

            if ((doc = node.ownerDocument) && (win = doc.defaultView) && typeof win.getSelection != 'undefined' && typeof doc.createRange != 'undefined' && (selection = window.getSelection()) && typeof selection.removeAllRanges != 'undefined'){

                range = doc.createRange();

                range.selectNode(node);

                if(i == 0){

                    selection.removeAllRanges();

                }

                selection.addRange(range);

            } else if (document.body && typeof document.body.createTextRange != 'undefined' && (range = document.body.createTextRange())){

                range.moveToElementText(node);

                range.select();

            }

        });

    }, 

    setCaret: function(){

        //if(!$.browser.msie) return;

        var initSetCaret = function(){

            var textObj = $(this).get(0);

            //textObj.caretPos = document.selection.createRange().duplicate();

        };

        $(this).click(initSetCaret).select(initSetCaret).keyup(initSetCaret);

    }, 

    insertAtCaret: function(textFeildValue){

        var textObj = $(this).get(0);

        if(document.all && textObj.createTextRange && textObj.caretPos){

            var caretPos=textObj.caretPos;

            caretPos.text = caretPos.text.charAt(caretPos.text.length-1) == '' ?

            textFeildValue+'' : textFeildValue;

        } else if(textObj.setSelectionRange){

            var rangeStart=textObj.selectionStart;

            var rangeEnd=textObj.selectionEnd;

            var tempStr1=textObj.value.substring(0,rangeStart);

            var tempStr2=textObj.value.substring(rangeEnd);

            textObj.value=tempStr1+textFeildValue+tempStr2;

            textObj.focus();

            var len=textFeildValue.length;

            textObj.setSelectionRange(rangeStart+len,rangeStart+len);

            textObj.blur();

        }else{

            textObj.value+=textFeildValue;

        }

    }

});

qqface.js

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>qqFace</title>

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

<link rel="stylesheet" href="css/reset.css">

<style>

.comment{width:680px; margin:20px auto; position:relative; background:#fff; padding:20px 50px 50px; border:1px solid #DDD; border-radius:5px;}

.comment h3{height:28px; line-height:28px}

.com_form{width:100%; position:relative}

.input{width:99%; height:60px; border:1px solid #ccc}

.com_form p{height:28px; line-height:28px; position:relative; margin-top:10px;}

span.emotion{width:42px; height:20px;}

span.emotion:hover{background-position:2px -28px}

.qqFace{margin-top:4px;background:#fff;padding:2px;border:1px #dfe6f6 solid;}

.qqFace table td{padding:0px;}

.qqFace table td img{cursor:pointer;border:1px #fff solid;}

.qqFace table td img:hover{border:1px #0066cc solid;}

#show{width:770px; margin:20px auto; background:#fff; padding:5px; border:1px solid #DDD; vertical-align:top;}

.sub_btn {

    position:absolute; right:0px; top:0;

    display: inline-block;

    zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */

    *display: inline;

    vertical-align: baseline;

    margin: 0 2px;

    outline: none;

    cursor: pointer;

    text-align: center;

    font: 14px/100% Arial, Helvetica, sans-serif;

    padding: .5em 2em .55em;

    text-shadow: 0 1px 1px rgba(0,0,0,.6);

    -webkit-border-radius: 3px;

    -moz-border-radius: 3px;

    border-radius: 3px;

    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);

    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);

    box-shadow: 0 1px 2px rgba(0,0,0,.2);

    color: #e8f0de;

    border: solid 1px #538312;

    background: #64991e;

    background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));

    background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);

    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');

}

.sub_btn:hover {

    background: #538018;

    background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));

    background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);

    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');

}

</style>

</head>

<body>

     <div id="show"></div>

     <div class="comment">

        <div class="com_form">

            <textarea class="input" id="saytext" ></textarea>

            <p><input type="button" class="sub_btn" value="提交"><span class="emotion">表情</span></p>

        </div>

     </div>    

<script  src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery.qqFace.js"></script>

<script type="text/javascript">

$(function(){

    $('.emotion').qqFace({

        id : 'facebox',

        assign:'saytext',

        path:'arclist/'    //表情存放的路径

    });

    $(".sub_btn").click(function(){

        var str = $("#saytext").val();

        $("#show").html(replace_em(str));

    });

});

//查看结果

function replace_em(str){

    str = str.replace(/\</g,'&lt;');

    str = str.replace(/\>/g,'&gt;');

    str = str.replace(/\n/g,'<br/>');

    str = str.replace(/\[em_([0-9]*)\]/g,'<img src="arclist/$1.gif" border="0" />');

    return str;

}

</script>

</body>

</html>

四. 文件本地预览上传

function handleFileSelect(evt) {

    var files = evt.target.files;

    // Loop through the FileList and render image files as thumbnails.

    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.

      if (!f.type.match('image.*')) {

        continue;

      }

      var reader = new FileReader();

      // Closure to capture the file information.

      reader.onload = (function(theFile) {

        return function(e) {

          // Render thumbnail.

          var span = document.createElement('span');

          span.innerHTML =

          [

            '<img style="height: 75px; border: 1px solid #000; margin: 5px" src="',

            e.target.result,

            '" title="', escape(theFile.name),

            '"/>'

          ].join('');

          document.getElementById('list').insertBefore(span, null);

        };

      })(f);

      // Read in the image file as a data URL.

      reader.readAsDataURL(f);

    }

  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);

fileLocalUpload.js

<input type="file" id="files" multiple />

<output id="list"></output>

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

对百度WebUploader的二次封装,精简前端代码之图片预览上传(两句代码搞定上传)
前言本篇文章上一篇: 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传) 此篇是在上面的基础上扩展出来专门上传图片的控件封装. 首先我们看看效果: 正文使用方式同 ...
js获取base64格式图片预览上传并用php保存到本地服务器指定文件夹
html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
Ext JS 5的声明式事件监听
在前文<在Ext JS 5使用ViewControllers>中,简单的介绍了Ext JS 5的一项重要改进——声明式事件监听.在本文,将深度探讨如何使用声明式事件监听啦简化应用程序的视图 ...
js和jquery实现页面滚动监听
js和jquery实现页面滚动监听一.总结一句话总结:onscroll方法和监听页面元素的高度都可以实现滚动监听. 1.onscroll方法实现滚动监听的核心代码是什么? <body ons ...
Linux hostname对Oracle实例以及监听的影响
在Linux平台中,对hostname的修改,是否对ORACLE数据库实例或监听进程有影响呢?如果有影响,又要如何解决问题呢?另外/etc/hosts下相关内容的修改,是否也会影响实例或监听呢?这里涉 ...
[html5+java]文件异步读取及上传核心代码
html5+java 文件异步读取及上传关键代码段功能: 1.多文件文件拖拽上传,file input 多文件选择 2.html5 File Api 异步FormData,blob上传,图片显示 3 ...
【Azure 应用服务】App Service 在使用GIt本地部署，上传代码的路径为/home/site/repository，而不是站点的根目录/home/site/wwwroot。这个是因为什么？
问题描述 App Service 在使用GIt本地部署,上传代码的路径为/home/site/repository,而不是站点的根目录/home/site/wwwroot. 这个是因为什么? 并且通过 ...
【转】Android开发20——单个监听器监听多个按钮点击事件
原文网址:http://woshixy.blog.51cto.com/5637578/1093936 原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处 .作者信息和本声明.否则将追究法律 ...
如何使用Git建立本地仓库并上传代码到GitHub
使用Git建立本地仓库并上传代码到GitHub 工具/原料电脑安装git客户端.注册github账号并登陆方法/步骤到本地项目文件夹右键选择git bash here 输入个人信 ...

随机推荐

第五节：表单标签的用法——value绑定和修饰符
1.表单标签的用法--value绑定和修饰符 value绑定的写法:v-bind:value 或者简写 :value 修饰符: lazy , Number , trim . 用法如: v-model ...
WPF Bitmap转Imagesource
var imgsource = System.Windows.Interop.Imaging.CreateBitmapSourceFromHBitmap(bmp.GetHbitmap(),IntPtr ...
toString()方法
前面的话本文将介绍toString()方法,toString()方法返回反映这个对象的字符串 [1]undefined和null没有toString()方法 undefined.toString() ...
Oracle Concept
1. Truncate Truncate是DDL命令.表的物理位置是保存在数据字典中表的定义的一部分.首次创建时,在数据库的数据文件内给表分配了一个固定大小的空间.这就是所谓的区间并且为空.那么当插入 ...
Datatables 在asp.net mvc中的使用
前言最近使用ABP(ASP.NET Boilerplate)做新项目,以前都是自己扩展一个HtmlHelper来完成同步/异步分页,但是有个地方一直不满意,排序太费劲. 以前接触过一点点的Datat ...
你真的精通 CSS 了？来挑战一下 CSS 选择器测验吧
CSS 选择器赋予 CSS 强大的 HTML 元素匹配功能.作为前端开发人员必须要掌握的一部分,可能基本的大家都知道.但是你真的精通 CSS 了吗?挑战一下 CSS 选择器测验就知道. 您可能感兴趣的 ...
JS网页顶部弹出可关闭广告图层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
谷歌插件Image downloader开发之 content script
自己运营了一个公众号,在发文章的时候,需要在网上找一些图,而有些网站的图片可能隐藏在属性或者背景图中,要下载的时候经常审查元素,查看源码,不太方便,最近在看一些谷歌插件的api,便顺手做了一个插件Im ...
关于WCF服务在高并发情况下报目标积极拒绝的异常处理
最近弄了个wcf的监控服务,偶尔监控到目标服务会报一个目标积极拒绝的错误.一开始以为服务停止了,上服务器检查目标服务好好的活着.于是开始查原因. 一般来说目标积极拒绝(TCP 10061)的异常主要是 ...
JavaScript DOM学习总结（一）
DOM 什么是DOM?简单地说DOM是一套对文档内容进行抽象和概念化的方法. W3C给出的DOM定义是这样的:"一个与系统平台和编程语言无关的接口,程序和脚本以通过这个接口动态的访问和修 ...

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

一.input框字数监听

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

三.表情框

四. 文件本地预览上传

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

随机推荐

热门专题