选中网页内容弹出按钮点击发送选中内容到服务器

  效果:在网页中选中一段内容后,自动弹出一个按钮,点击按钮可以将选中的内容回发到服务器。

  实现方法:用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);

 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:选中网页内容弹出按钮点击发送选中内容到服务器

评论(1)Web开发网
阅读(349)喜欢(0)JavaScript/Ajax开发技巧