Come posizionare il cursore in una textarea?

**Donovant** · 12-02-2013, 23:08

Salve, vorrei capire come fare ad esempio con per una chat, al momento dell'inserimento di una emoticon (abc.EMO.def) e far si che il cursore a fine inserimento si trovi DOPO ".EMO."

Grazie.

**bionicoz** · 13-02-2013, 01:26

Vedi se fa al caso tuo. È per jquery ma si può facilmente riscrivere per js puro.
http://jsfiddle.net/bionicoz/5PDNh/
Ciao.

**carlomarx** · 13-02-2013, 02:30

JavaScript puro:

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MDC Example</title>
<script type="text/javascript">
    function insertMetachars(sStartTag, sEndTag) {
        var bDouble = arguments.length > 1, oMsgInput = document.myForm.myTxtArea, nSelStart = oMsgInput.selectionStart, nSelEnd = oMsgInput.selectionEnd, sOldText = oMsgInput.value;
        oMsgInput.value = sOldText.substring(0, nSelStart) + (bDouble ? sStartTag + sOldText.substring(nSelStart, nSelEnd) + sEndTag : sStartTag) + sOldText.substring(nSelEnd);
        oMsgInput.setSelectionRange(bDouble || nSelStart === nSelEnd ? nSelStart + sStartTag.length : nSelStart, (bDouble ? nSelEnd : nSelStart) + sStartTag.length);
        oMsgInput.focus();
    }
</script>
<style type="text/css">
    .intLink {
        cursor: pointer;
        text-decoration: underline;
        color: #0000ff;
    }
</style>
</head>
 
<body>
 
<form name="myForm">


[<span class="intLink" onclick="insertMetachars('&lt;strong&gt;','&lt;\/strong&gt;');">Bold</span> | <span class="intLink" onclick="insertMetachars('&lt;em&gt;','&lt;\/em&gt;');">Italic</span> | <span class="intLink" onclick="var newURL=prompt('Enter the full URL for the link');if(newURL){insertMetachars('&lt;a href=\u0022'+newURL+'\u0022&gt;','&lt;\/a&gt;');}else{document.myForm.myTxtArea.focus();}">URL</span> | <span class="intLink" onclick="insertMetachars('\n&lt;code&gt;\n','\n&lt;\/code&gt;\n');">code</span> | <span class="intLink" onclick="insertMetachars(' :-)');">smile</span> | etc. etc.]</p>


<textarea rows="10" cols="50" name="myTxtArea">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis, arcu vitae adipiscing placerat, nisl lectus accumsan nisi, vitae iaculis sem neque vel lectus. Praesent tristique commodo lorem quis fringilla. Sed ac tellus eros. Sed consectetur eleifend felis vitae luctus. Praesent sagittis, est eget bibendum tincidunt, ligula diam tincidunt augue, a fermentum odio velit eget mi. Phasellus mattis, elit id fringilla semper, orci magna cursus ligula, non venenatis lacus augue sit amet dui. Pellentesque lacinia odio id nisi pulvinar commodo tempus at odio. Ut consectetur eros porttitor nunc mollis ultrices. Aenean porttitor, purus sollicitudin viverra auctor, neque erat blandit sapien, sit amet tincidunt massa mi ac nibh. Proin nibh sem, bibendum ut placerat nec, cursus et lacus. Phasellus vel augue turpis. Nunc eu mauris eu leo blandit mollis interdum eget lorem. </textarea></p>
</form>
 
</body>
</html>

Risultato: http://htmlpaste.com/8b59cc2078cf83a...b1533162e20292

**Donovant** · 13-02-2013, 04:32

carlomarx: la tua soluzione è ottima, ma volevo sapere se va su FF, IE, Opera e Safari, o per qualcuno di questi devo operare differentemente?

Grazie mille

Discussione: Come posizionare il cursore in una textarea?

Strumenti discussione

Ricerca discussione

Visualizza

Come posizionare il cursore in una textarea?

Permessi di invio