输入长度过大时，隐藏后缀显示区

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>输入超长时隐藏后缀显示区</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
.formIpt, .domain {
position: absolute;
}
.loginFormIpt, .ico{
background-image: url("http://mimg.127.net/index/163/img/2013/bg_v3.png");
}
body, input, select, button {
font-family: verdana;
}
.loginFormIpt {
background-position: 0 -352px;
clear: both;
height: 42px;
line-height: 42px;
margin: 0 0 20px 25px;
padding-right: 5px;
position: relative;
width: 240px;
z-index: 2;
}
.loginFormIpt .ico {
left: 9px;
position: absolute;
top: 13px;
z-index: 1;
}

.formIpt {
background: none repeat scroll 0 0 transparent !important;
border: medium none;
color: #333;
font-family: verdana;
font-size: 14px;
font-weight: 700;
height: 21px;
ime-mode: disabled;
left: 28px;
line-height: 21px;
padding: 9px 0 10px;
top: 1px;
width: 205px;
}
.formIpt:focus {
outline: 0 none;
}
.showPlaceholder .placeholder {
cursor: text;
visibility: visible;
}
.placeholder {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
color: #c9c9c9;
font-size: 14px;
left: 30px;
line-height: 14px;
position: absolute;
top: 14px;
visibility: hidden;
}
.domain {
color: #616161;
display: block;
font-size: 14px;
height: 33px;
line-height: 33px;
overflow: hidden;
padding-left: 5px;
right: 8px;
top: 4px;
white-space: nowrap;
width: 75px;
}
#idInputTest {
font-size: 14px;
font-weight: 700;
position: absolute;
visibility: hidden;
}

.loginFormCbx {
height: 13px;
margin: 0;
overflow: hidden;
padding: 0;
vertical-align: middle;
width: 13px;
}
#whatAutologinTip {
background-color: #fffde4;
border: 1px solid #dfb86d;
border-radius: 4px;
color: #dc9632;
display: none;
height: 36px;
left: 0;
line-height: 18px;
padding: 5px 10px;
text-align: left;
top: 16px;
width: 180px;
z-index: 9;
}
.loginFormIpt .ico {
left: 9px;
position: absolute;
top: 13px;
z-index: 1;
}
.ico-uid {
background-position: -154px -64px;
height: 16px;
width: 14px;
}
</style>
</head>

<body>
<div id="idInputLine" class="loginFormIpt showPlaceholder">
<b class="ico ico-uid"></b>
<input id="idInput" onKeyUp="fIdInputEvent()" class="formIpt" type="text" value="" maxlength="50" name="username" title="请输入帐号" tabindex="1" autocomplete="off">
<span id="showdomain" class="domain">@163.com</span>
<div id="mobtips"></div>
<label id="idPlaceholder" class="placeholder" for="idInput">邮箱帐号或手机号</label>
<div id="idInputTest"></div>
</div>
<script>
/**
* 输入超长时隐藏后缀显示区
*/

function fIdInputEvent(){

var nDomainWidth = 75;
var oId, oIdL, oPw, oPwL;
oId = document.getElementById('idInput');
var oShowDomain = document.getElementById('showdomain');
var oInputTest = document.getElementById('idInputTest');
var oPlaceholder = document.getElementById('idPlaceholder');
oPlaceholder.innerHTML = "";
if(oInputTest.innerText != undefined){
oInputTest.innerText = oId.value;
}else{
oInputTest.innerHTML = oId.value;
}

var tmpWidth = oInputTest.offsetWidth;

if(tmpWidth - 130 >= 0 && tmpWidth - 130 <= nDomainWidth){
//alert(1);
oShowDomain.style.width = nDomainWidth - (tmpWidth - 130) + 'px';
}else if(tmpWidth - 130 < 0){
//alert(2);
oShowDomain.style.width = nDomainWidth + 'px';
}else{
//alert(3);
oShowDomain.style.width = '0px';
}
}

posted on 2015-03-16 17:21  liuwenbohhh  阅读(164)  评论(0)  编辑  收藏  举报