选中网页内容弹出按钮点击发送选中内容到服务器
效果:在网页中选中一段内容后,自动弹出一个按钮,点击按钮可以将选中的内容回发到服务器。
实现方法:用javascript添加document.onmouseup事件,用range API判断是否选中内容,选中内容则弹出按钮,给按钮绑定点击事件,点击后将选中的内容使用ajax发送到服务器端。
选中网页内容弹出按钮点击发送选中内容到服务器源代码如下
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script> <style> #btnSend{position:absolute;display:none;} </style> <script> var selectedText; function ajaxSend(){alert(selectedText) $('#btnSend').attr('disabled',true) $.ajax({url:'xxxx.ashx',type:'POST',data:{s:selectedText},complete:function(xhr){ alert('ajax请求完毕,服务器返回内容:'+xhr.responseText); $('#btnSend').hide(); }}); } document.onmousedown=function(){selectedText=false;} document.onmouseup=function(e){ e=e||window.event; selectedText=window.getSelection?window.getSelection().toString():document.selection?document.selection.createRange().text:false; if(selectedText){ //判断页面是否有滚动,有的话还得加上滚动的距离,要不按钮定位不准 var sl=Math.max(document.documentElement.scrollLeft,document.body.scrollLeft), st=Math.max(document.documentElement.scrollTop,document.body.scrollTop); $('#btnSend').css({left:e.clientX+sl,top:e.clientY+st}).show().attr('disabled',false); } else $('#btnSend').hide(); } </script> <input type="button" value="提交选中内容" onclick="ajaxSend()" id="btnSend"/> 效果:在网页中选中一段内容后,自动弹出一个按钮,点击按钮可以将选中的内容回发到服务器。 实现方法:用javascript添加document.onmouseup事件,用range API判断是否选中内容,选中内容则弹出按钮,给按钮绑定点击事件,点击后将选中的内容使用ajax发送到服务器端。 选中网页内容弹出按钮点击发送选中内容到服务器源代码如下 <div style="height:1000px"></div> 效果:在网页中选中一段内容后,自动弹出一个按钮,点击按钮可以将选中的内容回发到服务器。 实现方法:用javascript添加document.onmouseup事件,用range API判断是否选中内容,选中内容则弹出按钮,给按钮绑定点击事件,点击后将选中的内容使用ajax发送到服务器端。 选中网页内容弹出按钮点击发送选中内容到服务器源代码如下
xxxx.ashx
string s=context.Request.Form["s"]; context.Response.Write(s+"--"+DateTime.Now);
加支付宝好友偷能量挖...
原创文章,转载请注明出处:选中网页内容弹出按钮点击发送选中内容到服务器