什么是香草JS或jQuery解决方案,将选择一个文本框的所有内容时,文本框接收焦点?


当前回答

jQuery不是JavaScript,在某些情况下JavaScript更容易使用。

看看这个例子:

<textarea rows="10" cols="50" onclick="this.focus();this.select()">Text is here</textarea>

来源:CSS Tricks, MDN

其他回答

我有点晚了,但这在IE11, Chrome, Firefox中工作完美,没有混乱的鼠标(没有JQuery)。

inputElement.addEventListener("focus", function (e) {
    var target = e.currentTarget;
    if (target) {
        target.select();
        target.addEventListener("mouseup", function _tempoMouseUp(event) {
            event.preventDefault();
            target.removeEventListener("mouseup", _tempoMouseUp);
        });
    }
});

jQuery不是JavaScript,在某些情况下JavaScript更容易使用。

看看这个例子:

<textarea rows="10" cols="50" onclick="this.focus();this.select()">Text is here</textarea>

来源:CSS Tricks, MDN

$(document).ready(function() {
    $("input:text").focus(function() { $(this).select(); } );
});

我在某个地方播种了这个,工作得很完美!

            $('input').on('focus', function (e) {
                $(this)
                $(element).one('mouseup', function () {
                        $(this).select();
                        return false;
                    })                        .select();
            });

通过加入一些函数调用,我可以稍微改进Zach的回答。这个答案的问题是它完全禁用了onMouseUp,从而阻止你在文本框中点击,一旦它有焦点。

这是我的代码:

<input type="text" onfocus="this.select()" onMouseUp="javascript:TextBoxMouseUp();" onMouseDown="javascript:TextBoxMouseDown();" />

<script type="text/javascript">
    var doMouseUp = true;
    function TextBoxMouseDown() {
        doMouseUp = this == document.activeElement;
        return doMouseUp;
    }
    function TextBoxMouseUp() {
        if (doMouseUp)
        { return true; }
        else {
            doMouseUp = true;
            return false;
        }
    }
</script>

这比扎克的回答略有进步。它在IE中工作得很完美,在Chrome中完全不能工作,在FireFox中则是交替成功(几乎每隔一次)。如果有人有一个想法,如何使它可靠地工作在FF或Chrome,请分享。

总之,我想我应该分享我所能做的让这一切更美好。