Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Katya_crisd

Fazer intellisense em Textarea ou Rich text

Por , em Javascript

Recommended Posts

Katya_crisd    0

Katya_crisd
Postado

Olá pessoal

 

Gostaria de saber se é possível fazer um intellisense em ou Textarea ou em um Rich Text com javascript.

 

Tentei ver se conseguia pegar as coordenadas do cursor de digitação dentro de um Textarea e Rich Text para abrir uma div com as opções mas não consegui.

 

Pra que não sabe o que é intellisense segue uma imagem do mesmo (intellisense é aquela janelinha que tem as propriedades do objeto)

 

Imagem Postada

 

Valeu

Compartilhar este post

Link para o post
Compartilhar em outros sites

andreia_sp    1

andreia_sp
Postado

Tenho este script que peguei da net uma vez, veja se te ajuda:

 

<html>
<head>
<title>Auto-Completar</title>

<script language="JavaScript">
<!--
var nameArray=new Array(
"Adam Young",
"Albert Downey",
"Bernie Pottrell",
"Beth Wood",
"Cathy Tillyer",
"Denis O'Rourke",
"George Palframan",
"Holly Toogood",
"Ian Thompson",
"James Skinner",
"Jenny Hackwell",
"John O'Neill",
"Kathy Toogood",
"Lizzie Schofield",
"Malcolm Toogood",
"Mike Child",
"Mike Pollard",
"Paul Whitrow",
"Pete Escott",
"Richard Gilbert",
"Richard Wheeler",
"Russell Kay",
"Shelley Godwin",
"Simon Givens",
"Steve White",
"Tim Smith",
"Tom Bagshaw",
"Tony Dannatt"
)

var colors = new Array(
"aliceblue",
"antiquewhite",
"aqua",
"aquamarine",
"azure",
"beige",
"bisque",
"black",
"blanchedalmond",
"blue",
"blueviolet",
"brown",
"burlywood",
"cadetblue",
"chartreuse",
"chocolate",
"coral",
"cornflowerblue",
"cornsilk",
"crimson",
"cyan",
"darkblue",
"darkcyan",
"darkgoldenrod",
"darkgray",
"darkgreen",
"darkkhaki",
"darkmagenta",
"darkolivegreen",
"darkorange",
"darkorchid",
"darkred",
"darksalmon",
"darkseagreen",
"darkslateblue",
"darkslategray",
"darkturquoise",
"darkviolet",
"deeppink",
"deepskyblue",
"dimgray",
"dodgerblue",
"firebrick",
"floralwhite",
"forestgreen",
"fuchsia",
"gainsboro",
"ghostwhite",
"gold",
"goldenrod",
"gray",
"green",
"greenyellow",
"honeydew",
"hotpink",
"indianred",
"indigo",
"ivory",
"khaki",
"lavender",
"lavenderblush",
"lawngreen",
"lemonchiffon",
"lightblue",
"lightcoral",
"lightcyan",
"lightgoldenrodyellow",
"lightgreen",
"lightgrey",
"lightpink",
"lightsalmon",
"lightseagreen",
"lightskyblue",
"lightslategrey",
"lightsteelblue",
"lightyellow",
"lime",
"limegreen",
"linen",
"magenta",
"maroon",
"mediumaquamarine",
"mediumblue",
"mediumorchid",
"mediumpurple",
"mediumseagreen",
"mediumslateblue",
"mediumspringgreen",
"mediumturquoise",
"mediumvioletred",
"midnightblue",
"mintcream",
"mistyrose",
"moccasin",
"navajowhite",
"navy",
"oldlace",
"olive",
"olivedrab",
"orange",
"orangered",
"orchid",
"palegoldenrod",
"palegreen",
"paleturquoise",
"palevioletred",
"papayawhip",
"peachpuff",
"peru",
"pink",
"plum",
"powderblue",
"purple",
"red",
"rosybrown",
"royalblue",
"saddlebrown",
"salmon",
"sandybrown",
"seagreen",
"seashell",
"sienna",
"silver",
"skyblue",
"slateblue",
"slategray",
"snow",
"springgreen",
"steelblue",
"tan",
"teal",
"thistle",
"tomato",
"turquoise",
"violet",
"wheat",
"white",
"whitesmoke",
"yellow",
"yellowgreen"
)

var systemColors = new Array(
'ActiveBorder',
'ActiveCaption',
'AppWorkspace',
'Background',
'ButtonFace',
'ButtonHighlight',
'ButtonShadow',
'ButtonText',
'CaptionText',
'GrayText',
'Highlight',
'HighlightText',
'InactiveBorder',
'InactiveCaption',
'InactiveCaptionText',
'InfoBackground',
'Menu',
'MenuText',
'Scrollbar',
'ThreeDDarkShadow',
'ThreeDFace',
'ThreeDHighlight',
'ThreeDLightShadow',
'Window',
'WindowFrame',
'WindowText'
)

document.write(
'<style type="text/css">'+
'#listHolder{'+
' position:absolute;'+
' border:0;'+
'}'+
'.list{'+
' font-family:verdana;'+
' font-size:10;'+
' color:#000000;'+
' background:;'+
'}'+
'<\/style>'
)


function checkList(event, obj,what){
var k=(window.event)? k = event.keyCode : k = event.which;


var T=findPosY(obj)
var L=findPosX(obj)
var hld=document.getElementById('listHolder')
if(!hld){
var hld=document.createElement('DIV')
hld.id='listHolder'
document.body.appendChild(hld)
}
hld.style.top=(T+obj.offsetHeight)
hld.style.left=L
hld.style.display='none'
var txt=obj.value
if(txt){
var str='<select class="list" onclick="setOption(\''+obj.id+'\',this.options[this.selectedIndex].value)" onkeyup="if(event.keyCode==13){setOption(\''+obj.id+'\',this.options[this.selectedIndex].value)};if(event.keyCode==27){document.getElementById(\'listHolder\').style.display=\'none\';document.getElementById(\''+obj.id+'\').focus()};" id="selector" size="6">'
var match=false
for(a=0;a<what.length;a++){
if(txt.toLowerCase()==what[a].toLowerCase().substring(0,txt.length)){
match=true
str+=('<option value="'+what[a].replace(/\'/gi,'’')+'">'+what[a]+'</option>')
}
}
str+='</select>'
if(match){
hld.innerHTML=str
hld.style.display='block'
var sel=document.getElementById('selector')
if(k=='40'){
sel.focus()
}
if(k=='13'){
document.getElementById('listHolder').style.display='none'
//boxAction(obj.value)
}
}
}
}

function setOption(obj,val){
var obj=document.getElementById(obj)
obj.value=val
obj.focus()
document.getElementById('listHolder').style.display='none'
}

function findPosX(obj){
var curleft=0;
if(obj.offsetParent){
while(obj.offsetParent){
curleft+=obj.offsetLeft
obj=obj.offsetParent;
}
}
else if(obj.x)
curleft+=obj.x;
return curleft;
}

function findPosY(obj){
var curtop=0;
if(obj.offsetParent){
while(obj.offsetParent){
curtop+=obj.offsetTop
obj=obj.offsetParent;
}
}
else if(obj.y)
curtop+=obj.y;
return curtop;
}

function boxAction(val){
alert(val)
}

//-->
</script>

</head>

<body>

<center>

<form method=post action="">
<table>
<tr class="navTxtLiks"><td>Names:</td><td><input type="text" name="textBox" id="textBox" size="30" onkeyup="checkList(event, this,nameArray)"></td></tr>
<tr class="navTxtLiks"><td>Colors:</td><td><input type="text" name="textBox2" id="textBox2" onkeyup="checkList(event, this,colors)"></td></tr>
<tr class="navTxtLiks"><td>Other:</td><td><textarea rows="" cols="" name="textBox3" id="textBox3" onkeyup="checkList(event, this,systemColors)"></textarea></td></tr>
</table>
</form>

</center>

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Katya_crisd    0

Katya_crisd
Postado

Obrigada Andreia... mas até ai já tinha chego...

 

O problema mesmo é pegar a posição do cursor de digitação para colocar as opções após este cursor... mas pelo que vi só consigo pegar a posição de um objeto não de um cursor de digitação...

 

tens alguma idéia de como fazer isso?

 

valeu

Compartilhar este post

Link para o post
Compartilhar em outros sites

berkowitz    2

berkowitz
Postado

Tem como sim, e um exemplo funcional é o próprio fórum aqui. Quando você está digitando um post e aí clica em qualquer lugar do texto e insere um emoticon ele aparece no local.

Compartilhar este post

Link para o post
Compartilhar em outros sites

berkowitz    2

berkowitz
Postado

Ah!!! Entendi! :)

Tenta isso aqui então:

 

<script language="JavaScript" type="text/javascript">
<!--
	function coordenadas(ev) {
		var e = (window.event)?window.event:ev;
		var x = e.clientX;
		var y = e.clientY;
		var localizacao = (x + " »« " + y);
		document.getElementById('coordenadas').innerHTML = localizacao;
	}
//-->
</script>

No BODY você adiciona isso:

<body.... onMouseMove="coordenadas(event);"...>

 

E depois a tag pra aparecer as coordenadas:

<span id="coordenadas"></span>

 

ABRAX!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Katya_crisd    0

Katya_crisd
Postado

Valeu berkowitz pela ajuda, mas não é a posição do mouse que eu quero, eu quero as coordenadas o ponteiro do cursor de digitação em um rich text por exemplo. Ai vai um print screen do fckeditor pra ficar mais claro

 

Imagem Postada

 

valeu!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

berkowitz    2

berkowitz
Postado

Mas então, como eu disse! Da forma como é aqui no fórum não da pra ajudar? C pegar o selStart e jogar a provável div pra aparecer alí?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Katya_crisd    0

Katya_crisd
Postado

Bom, pelo que sei, com o selStart eu pego apenas a posição na linha em que o cursor está, assim vou apenas conseguir jogar caracteres dentro da caixa de texto na posição correta, mas o que preciso é que uma div se posicione logo após o cursor de edição de texto, independentemente onde esteja a caixa de texto e independentemente da rolagem dela.

 

Por exemplo, digamos que tenha um texto de 9 linhas, mas apenas 5 fiquem visiveis. Se meu cursor estiver na linha cinco, ele aparecerá na última linha visivel, mas se eu rolar o scroll ele ficará na primeira.

 

Por isso preciso das coordenada X e Y do cursor, pra jogar a div logo depois dele independentemente de barra de rolagem resolução da tela ou qualquer outro fator.

 

valeu

Compartilhar este post

Link para o post
Compartilhar em outros sites

berkowitz    2

berkowitz
Postado

Hmmm.... entendi.

Mas vamos ver se minha idéia está correta heehehe:

O selStart retorna um valor numérico de onde o cursor está, correto? Se você pegar esse valor e utilizar para posicionar sua caixa (DIV por exemplo) não da certo?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Katya_crisd    0

Katya_crisd
Postado

Exatamente, o selectionStart conta o número de caracteres, segue um exemplo

 

<script language="JavaScript" type="text/JavaScript">
function informaposicao() {
var posicao = document.formulario.texto.selectionStart;
alert(posicao);
}
</script>

<form name="formulario">
<center>
<input name="botao" type="button" value="Ver posição" onClick="informaposicao();">
<br>
<br>
Texto:
<br><br>
<textarea name="texto" id="texto" cols="30" rows="10"></textarea><br>
</center>
</form>

(acho que este código ai funciona apenas em firefox)

 

Só que este número, o do selStart não me traz a realidade das coordenadas, pq ele cria uma barra horizontal que faz com que o meu cursor que pode estar no último caracter visivel, vir a estar no primeiro caracter visivel se eu rolar a barra... e pra mim é necessário que a barra exista...

 

Há inúmeros outros problemas se eu tentar achar as coordenadas do cursor pelo selStart... outro exemplo é se o usuário quiser utilizar uma fonte que não é fixa, ou seja uma letra pode ter o tamanho diferente da outra, assim mesmo se eu tentar calcular a posição do cursor não vai funcionar....

 

Precisava mesmo de uma função se pegasse com precisão as coordenados do cursor de digitação

 

valeu

Compartilhar este post

Link para o post
Compartilhar em outros sites

berkowitz    2

berkowitz
Postado

Ta certo... entendi.

 

Bom... resumindo: Lascou! ahuaHhahuA

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito