前解forcus光标未尾 或者开始
forcus捕获到焦点时，光标会出现在对应的文本框当中，在文本框中有值时，因不同需要我们会有两种情况需求：
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
《一》
<input id="text2" placeholder="sssdfsfs" />
?
《二》
?
这里使用的是一个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 for="j_username" >Email address</label>
??????????????????????? <input type="text" maxlength="200" tabindex="1" name="j_username" id="j_username" autocomplete="off">
??????????????????????? </div>
??????????????????? </li>
??????????????????? <li style="display:none;"></li>
??????????????????? <li for="j_password" >Password</label>
??? ????????? ??? ??? <input type="password" tabindex="2" name="j_password" id="j_password" style="" maxlength="200" autocomplete="off">
??? ????????? ??? </div>???????????????
????????? </li><li style="display: none;"><span for="j_password" generated="true" style="display: none;">This field is required.</span></li>
??????????????? </ul>
???????????????????? <input type="submit" value="Sign In">
??????????????? <div type="text/javascript">
??? ??? ??? ???? ???
???????????????????? $(".inline-label").inFieldLabels();
??? ??? ??? </script>
</body>
</html>
?
