JQuery-从文本区域中选择所有文本

我如何才能使它,当你点击一个文本区域,它的整个内容得到选择?

最终当你再次点击,取消选择。

124365 次浏览

在元素中选择文本(类似于用鼠标突出显示)

:)

使用那篇文章中公认的答案,你可以这样调用函数:

$(function() {
$('#textareaId').click(function() {
SelectText('#textareaId');
});
});

我最后用了这个:

$('.selectAll').toggle(function() {
$(this).select();
}, function() {
$(this).unselect();
});

为了防止用户在每次尝试使用鼠标移动插入符号时选择整个文本时感到烦恼,您应该使用 focus事件而不是 click事件进行此操作。下面的代码将完成这项工作,并解决 Chrome 中的一个问题,这个问题阻止了最简单的版本(即在 focus事件处理程序中调用 textarea 的 select()方法)的工作。

http://jsfiddle.net/NM62A/

密码:

<textarea id="foo">Some text</textarea>


<script type="text/javascript">
var textBox = document.getElementById("foo");
textBox.onfocus = function() {
textBox.select();


// Work around Chrome's little problem
textBox.onmouseup = function() {
// Prevent further mouseup intervention
textBox.onmouseup = null;
return false;
};
};
</script>

JQuery 版本:

$("#foo").focus(function() {
var $this = $(this);
$this.select();


// Work around Chrome's little problem
$this.mouseup(function() {
// Prevent further mouseup intervention
$this.unbind("mouseup");
return false;
});
});

更好的方式,解决标签和铬问题和新的 jquery 方式

$("#element").on("focus keyup", function(e){


var keycode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
if(keycode === 9 || !keycode){
// Hacemos select
var $this = $(this);
$this.select();


// Para Chrome's que da problema
$this.on("mouseup", function() {
// Unbindeamos el mouseup
$this.off("mouseup");
return false;
});
}
});

略短的 jQuery 版本:

$('your-element').focus(function(e) {
e.target.select();
jQuery(e.target).one('mouseup', function(e) {
e.preventDefault();
});
});

它可以正确处理 Chrome 的边框,参见 http://jsfiddle.net/Ztyx/XMkwm/的例子。

$('textarea').focus(function() {
this.select();
}).mouseup(function() {
return false;
});