javascript - jquery 获取输入框出现发送按钮，如例子

Question

http://jsbin.com/tuyebegesa/edit?html,css,js,output

第一步点击输入框出现发送按钮 (效果实现)
第二步点击发送获取输入框中的文字实现弹出alert (未实现)
第三步失去输入框焦点时，不再出现发送按钮。 (实现)
请各位高手帮我看看为什么第二步不行
并希望给予修改和意见。

伊谢尔伦 · Answer

$(document).mouseup(function(e){
  var tjs = $("#J-pull");
  if(!tjs.is(e.target) && tjs.has(e.target).length === 0){
    $(".textarea-js").hide();
  }
});
$("#J-pull").focus(function(){
   $(".textarea-js").show();
});
$(".J-send").click(function(){
    var pop=$("#J-pull").val();
    alert(pop);
});

第一段代码来自：https://segmentfault.com/q/1010000000452465

另外，要用val()

高洛峰 · Answer

因为你点击发送按钮的时候已经失去焦点把按钮隐藏了，所以无法点击

怪我咯 · Answer

text() 改为 val()

PHP中文网 · Answer

按照你的思路，加个定时器就可以解决，但有一定的延迟。text()的问题，楼上已经说了。

//显示弹出框
$("#J-pull").focus(function(){
   $(".textarea-js").show();
});
$("#J-pull").blur(function(){
  setTimeout(function(){
     $(".textarea-js").hide();
  },100);
});
$(".J-send").click(function(){
    var pop=$("#J-pull").val();
    alert(pop);
});