Com o desenvolvimento da Web e expansão das funcionalidades da Web 2.0, devemos buscar nos aproximar o máximo de
aplicativos winForm.

Alternar funções de teclas, enter por tab, execução de inserção com chamada por atalho no teclado e n outras funções.

Foi então que pensei em uma maneira de instruir o usuário a preencher formulários, ou seja, informá-lo
obrigatoriamente com as informações necessárias sobre determiando campo.

Inicialmente teremos um arquivo XML que guardará todas as mensagens, centralizando assim o controle e armazenamento:

teremos o nó principal e dividiremos em seções por página e por controle, o id é o próprio id do controle e o msg
é a mensagem a ser mostrada ao usuário quando ele receber o foco.

webMsg.xml
----------

<Mauricio>
  <pagina id="Default.aspx">
    <controle id="tb01" msg="Primeiro." />
    <controle id="tb02" msg="Segundo teste para mensagens de instrução." />
  </pagina>
</Mauricio>


em seguida montamos um mini-formulário como exemplo:


    <form id="form1" runat="server">
        <div>        
            <div id="divWebMsg" class="cssLoading">
            </div>
                  Primeiro<asp:TextBox runat="server" ID="tb01" Width="200px"
                                     onfocus="retornawebMsg(this);"
                                     pag="Default.aspx" onfocusOut="removeFoco();">
                        </asp:TextBox><br />
                        
                  Segundo:<asp:TextBox runat="server" ID="tb02" Width="200px"
                                     onfocus="retornawebMsg(this);"
                                     pag="Default.aspx" onfocusOut="removeFoco();">
                        </asp:TextBox>
        </div>
    </form>

veja que adicionamos uma tag XHTML ao componente ASP.NEt que informa a qual página ele pertence, para podermos
retornar futuramente a sua respectiva mensagem no documento XML.

adicionamos então uma referência a um documento JavaScript, onde estarão as funções que farão o trabalho "sujo" :D

<script type="text/javascript" src="webMsg.js"></script>

webMsg.js
---------

/*
    Retorna posição x y do elemento html
    Essa função irá nos informar em que posição da tela se encontra o componente
*/

function cumulativeOffset(element)
{
    var valueT = 0, valueL = 0;
    do
    {
        valueT += element.offsetTop  || 0;
        valueL += element.offsetLeft || 0;
        element = element.offsetParent;
    }
    while (element);
        return [valueL, valueT];
}



/*
    Essa função se encarrega de limpar o o div que irá conter a mensagem e escondê-lo do usuário
*/
function removeFoco()
{
    var divMsg = document.getElementById('divWebMsg');    
    document.getElementById('divWebMsg').innerText = "";
    divMsg.style.visibility = "hidden";
}


/*
    Essa função é responsável pela leitura da mensagem do componente no documento XML
    Da inserção dessa mensagem no div e do posicionamento do div ao lado do componente que recebeu o foco
*/
function retornawebMsg(el)
{
   var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
   xmlDoc.async = false;
   xmlDoc.load("webMsg.xml");
   var xmlObj = xmlDoc.documentElement;
   var elemento = xmlDoc.selectNodes("//Mauricio/pagina[@id='"+el.pag+"']/controle[@id='"+el.id+"']" );
   var divMsg = document.getElementById('divWebMsg');
   divMsg.style.visibility = "visible";
   if(elemento.length == 1)
   {
      divMsg.innerText = elemento[0].getAttribute("msg");
      var xy = cumulativeOffset(el);
      divMsg.style.left = (parseInt(xy[0]) + parseInt(el.style.width) + 10) + 'px';     
      divMsg.style.top = xy[1] + 'px';
   }   
}


e por fim, estilizamos o nosso div com a classe css

    .cssLoading
    {       
        font-size:12px;
        color:White;
        font-family: Verdana, Arial;
        font-weight: bold;    
        background-color:#0066CC;
        text-align:center;
        vertical-align:middle;
        position:absolute;
    }

veja em funcionamento

é a Web rumo aos futuros aplicativos.

[]'s