Никак понять не могу (я пока еще зеленый), пытаюсь сделать чтоб при получении фокуса текстовым полем (хоть мышкой хоть клавой) содержимое инпута было выделено, т.е. вводимое значение заменяло старое значение, при этом если кликать или выделять текст, то чтобы все работало как обычно.
Если вешаю на onclick то любой клик соответственно выделяет все содержимое, если же onfocus (что вроде правильнее), то оно на долю секунды выделяет а потом выделение сбрасывается.
Подмогните кто чем может
<!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>