jQuery在元素旁边放置文本

时间:2014-11-08 19:41:51

标签: javascript jquery jsf

<h:inputText id="usernameInput" value="#{userBean.un}"
                styleClass="form-control" required="true"
                onfocus="popupMessage(this, 'username');">
                <f:validateRegex pattern="([a-zA-Z_0-9]+)"></f:validateRegex>
            </h:inputText>

function popupMessage(element, stringVal) {
                var position = $(element).position();
                if(stringVal === "username"){
                    $( element ).text( "left: " + position.left + ", top: " + position.top ) ;
                }else if(stringVal === "password"){

                }else{

                }
            }

我正在尝试使用此代码在输入字段旁边放置一条消息。上面你可以看到元素和我的脚本。我想要的是基于输入类型,无论是用户名还是密码,我希望在文本字段旁边显示一条消息,告诉人们输入什么。我计划在输入上放置一个onblur事件,以使消息消失。

我可以在控制台视图的元素中显示文本,但页面上没有任何内容。如何正确定位此消息? (“请注意,现在的消息只是调用元素的位置”)

谢谢!

2 个答案:

答案 0 :(得分:0)

-To positon text message beside input text field. You have to use the Jquery .css() method. 

-The .position() method allows us to retrieve the current position of an element relative to the offset parent. Contrast this with .offset(), which retrieves the current position relative to the document. You have to use the right method which helps you.

Jquery .text(string)方法有助于在匹配的选择器上显示文本,但不能用于定位它。

$(element).css({
                "left" :position.left
                ,"top" :position.top
              });

答案 1 :(得分:0)

当您使用Primefaces时,为什么不使用<p:tooltip>组件?您可以使用Primefaces Tooltip轻松实现您的目标。