Форум Сайтостроение Веб-строительство

Выделить текст внутри input при получении фокуса (jQuery)

Gmp
На сайте с 12.10.2008
Offline
83
Gmp
4475

Всем привет.

Решился таки немного по изучать jQ (всегда избегал и сильно не любил всякого рода яваскрипты) и на первой же задачке стал в ступор.

Пытаюсь сделать так, чтоб при получении фокуса текстовым полем (хоть мышкой хоть клавой) содержимое инпута было выделено, т.е. вводимое значение заменяло старое значение, при этом если кликать или выделять текст, то чтобы все работало как обычно (выделение сбрасывалось).

Если вешаю на onclick то любой клик соответственно выделяет все содержимое, если же onfocus (что вроде правильнее), то оно на долю секунды выделяет а потом выделение сбрасывается.

Чую что очевидное решение где-то рядом но найти его не могу.

Пощупать в действии: gmp.webservis.ru/test.html 


<!doctype html>

<html lang="ru">

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8"/>

<title></title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

 

<style type="text/css">

    #table tr {

        background:#dee3e7;

        border:0;

    }

    #table th {

        background:#eec3c7;

        border:0;

    }

    input[type=text] {

        background-color: transparent;

        border: 1px solid transparent;

    }

    input[type=text]:focus {

        border-bottom: 1px dotted #c6d0d8;

        outline: none;

    }

    input[type=text]::selection {

        background: #c6d0d8;

    }

</style>

</head>

 

<body>

 

<table id="table" cellspacing="0" cellpadding="0">

<thead>

<tr>

    <th>№</th>

    <th>Name</th>

    <th>Password</th>

</tr>

</thead>

<tbody>

<tr>

    <td>1</td>

    <td><input type="text" value="Puh" /></td>

    <td><input type="text" value="wqqwe" /></td>

</tr>

<tr>

    <td>2</td>

    <td><input type="text" value="Pyatak" /></td>

    <td><input type="text" value="211122" /></td>

</tr>

<tr>

    <td>3</td>

    <td><input type="text" value="Sova" /></td>

    <td><input type="text" value="Soaasa" /></td>

</tr>

<tr>

    <td>4</td>

    <td><input type="text" value="Champion" /></td>

    <td><input type="text" value="Scxcc" /></td>

</tr>

<tr>

    <td>5</td>

    <td><input type="text" value="Tongue" /></td>

    <td><input type="text" value="werbvf" /></td>

</tr>

</tbody>

</table>

 

<script type="text/javascript">

 

    $('#table input').on('focus', function(){

        $(this).select();

    });

 

</script>

 

</body>

</html>

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий