de******@hotmail.com wrote:
Hi all you JS experts,
Is there any way to put a blinking ibeam cursor in middle of td text -
the same way it would blink if I clicked in the middle of the text in a
text input? To further explain, I can highlight any text on an HTML
page by dragging, but if I just click I get no ibeam cursor (obviously
because I am not supposed to be able to edit). Is there anyway to get
one to sit there and blink where-ever I click on the page.
Thanks for your help
Pachydermitis
You can set it very easy for IE by using contenteditable attribute
(note that you cannot set table cell itself to contenteditable, so you
need a div wrapper).
<html>
<head>
<title>contentEditable</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style type="text/css">
body { background-color: #FFFFFF}
td div { font: 10pt Verdana, Helvetica, sans-serif; height: auto;
width: 100%}
</style>
</head>
<body>
<table width="75%" cellpadding="10" cellspacing="0" border="1">
<tbody>
<tr>
<td width="33%"><div contenteditable="true">empty</div></td>
<td width="34%"><div contenteditable="true">empty</div></td>
<td width="33%"><div contenteditable="true">empty</div></td>
</tr>
<tr>
<td><div contenteditable="true">empty</div></td>
<td><div contenteditable="true">Lorem ipsum dolor sit amet,
consectetuer
adipiscing elit. Phasellus in sem lacinia nunc rutrum tempor. Vivamus
facilisis.
Vivamus lectus eros, aliquet id, tincidunt in, tempus quis, erat. Etiam
scelerisque
sem et massa. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur
ridiculus mus. Ut at arcu. Praesent et turpis ac urna ornare hendrerit.
Mauris
vitae pede a libero scelerisque egestas. Nunc sollicitudin, orci et
commodo ultrices,
nisl libero vulputate urna, in posuere ligula arcu ut libero. In
ullamcorper neque
ut mi.</div></td>
<td><div contenteditable="true">empty</div></td>
</tr>
<tr>
<td><div contenteditable="true">empty</div></td>
<td><div contenteditable="true">empty</div></td>
<td><div contenteditable="true">empty</div></td>
</tr>
</tbody>
</table>
</body>
</html>
I guess you can emulate this on Firefox using document.designMode
property.
Opera and Safary (at least) do not have the necessary TextRange
methods. So you can get the selection using document.getSelection(),
but you cannot reliably attach it to the particular place in the
document (find the corresponding DOM block).
