Надежный способ выделения всего текста в текстовом поле - PullRequest
Новая
       2

Надежный способ выделения всего текста в текстовом поле

4 голосов
/ 31 декабря 2010

Я пытаюсь сделать так, чтобы содержимое текстового поля HTML было полностью выделено на Focus.

Я знаю простое решение поставить onfocus="this.select()" на компонент, но это не очень хорошее решение, потому что если пользователь дважды щелкает мышью в области, выделение теряется, а в таких браузерах, как Chrome, оно редко работает так, как должно, просто возвращается в форму ввода.

Я некоторое время искал в Google и не могу найти хорошее решение, большинство предложений касаются этого простого решения.

Я хотел бы, чтобы выделение внутри текстового поля не изменялось после выбора, и, если возможно, пользователь не должен иметь возможности редактировать содержимое текстового поля, например, если вы использовали AdSense, когда вы получаете код из AdSense, выбор никогда не меняется, и вы не можете изменить код в текстовом поле.

Любые решения будут оценены.

Ответы [ 3 ]

7 голосов
/ 31 декабря 2010

Звучит так, будто вы хотите, чтобы текстовое поле было доступно только для чтения. Однако я бы сказал, что предотвращение изменения выбора пользователем - плохая идея: это сбивает с толку и неудобно для пользователя, поэтому я этого не реализовал. Следующее выберет содержимое ввода, когда оно сфокусировано во всех браузерах, и оно будет доступно только для чтения: 

<input type="text" id="foo" readonly value="Some text">

<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>
4 голосов
/ 01 января 2011

Я изменил код с помощью Tim Down , чтобы заставить его работать так, как должен, вот окончательный код для других людей (убедитесь, что O в readOnly ) написано с большой буквы. 

<script type="text/javascript">
    function selectAll(id) {
        var textBox = document.getElementById(id);
        textBox.select();
        textBox.readOnly = true;
        textBox.onmouseup = function() {
            textBox.select();
            return false;
        };
        textBox.onmousedown = function() {
            textBox.select();
            return false;
        };
    };
</script>
0 голосов
/ 31 декабря 2010 
<html>
<body>
<script>
function getElement(elemname)
{
 if (document.getElementById)
  return document.getElementById(elemname);
 else if (document.all)
  return document.all[elemname];
 return 0;
}
function lockingSelect()
{
 ta = getElement("mytext");
 ta.select();
 ta.readonly = true;

}
</script>


<textarea id = "mytext"></textarea>

<br>
<input type=button onclick="lockingSelect();" value="lock"/>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...