focus光标未尾或者开始

最新推荐文章于 2025-08-02 10:33:58 发布

原创最新推荐文章于 2025-08-02 10:33:58 发布 · 336 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#xhtml #javascript #ViewUI

WEB前端专栏收录该内容

53 篇文章

订阅专栏

本文介绍了如何在HTML中通过JavaScript实现光标在文本框内的精准定位，包括光标置于文字末尾及文本框开始位置的操作，并详细解释了HTML5的占位符属性在提升用户体验上的应用。

focus捕获到焦点时，光标会出现在对应的文本框当中，在文本框中有值时，因不同需要我们会有两种情况需求：

1.光标出现在文字末尾

除了IE 浏览器不兼容之外，其他浏览器都可以支持。解决IE浏览器的兼容

var tar=document.getElementByIdx_x("name");

if(tar.attachEvent){

tar.attachEvent('onmouseover',focus(tar),false);

}else{

tar.addEventListener('mouseover',focus(tar),false);

}

function focus(tar){

tar.focus();
tar.value=tar.value;

}

先捕获焦点，把文框的值重新赋一下就OK 了。

2.光标出现在文本框的开始位置，输入文字时默认的文字会消失。被新值而取代

在HTML5中会有属于placeholder

《一》

《二》

这里使用的是一个jquery插件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="../csss/basic.css" />
<script language="javascript" type="text/javascript" src="../csss/jquery.js"></script>
<script language="javascript" type="text/javascript" src="../csss/jquery.infieldlabel.js"></script>
<style type="text/css">

.cr_mid {
    margin-top: 16px;
    width: 310px;
}

.cr_mid ul li {
    height: auto;
    position: relative;
    width: 310px;
}

.ep_con {
    background:url(../img/uc_input.png) no-repeat scroll 0 0 transparent;
    font-family: 'MuseoSans_500-webfont';
    height: 42px;
    position: relative;
    width: 312px;
}
label.deflut {
    -moz-user-select: none;
    color: #7794AA;
    display: inline-block;
    font-family: 'MuseoSans_500-webfont';
    font-size: 13px;
    left: 15px;
    position: absolute;
    top: 15px;
    transition: all 0.16s ease-in-out 0s;
    z-index: 2;
}

.input_ok {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    color: #7794AA;
    font-family: 'MuseoSans_500-webfont';
    height: 20px;
    line-height: 20px;
    margin: 11px 12px;
    width: 280px;
}
</style>
</head>

<body>
<div class="cr_mid">
                <ul>
                    <li class="username_li">
                        <div class="email ep_con">
                        <label class="deflut inline-label" for="j_username" >Email address</label>
                        <input type="text" maxlength="200" tabindex="1" class="input_ok" name="j_username" id="j_username" autocomplete="off">
                        </div>
                    </li>
                    <li style="display:none;"></li>
                    <li class="ep_con password">
                  <div class="list_text_default">
                    <label class="watermark deflut inline-label" for="j_password" >Password</label>
                      <input type="password" tabindex="2" class="input_ok" name="j_password" id="j_password" style="" maxlength="200" autocomplete="off">
                  </div>
          </li><li style="display: none;"><span for="j_password" generated="true" class="uc_red" style="display: none;">This field is required.</span></li>
                </ul>
                     <input type="submit" class="signin reg_com" value="Sign In">
                <div class="clear"></div>
                <h4 class="c_forget"><a href="/user/findPasswd.do">Forgot your password?</a></h4>
            </div>

            <script language="javascript" type="text/javascript">

                     $(".inline-label").inFieldLabels();
            </script>
</body>
</html>