많은 웹 사이트가 텍스트 상자에 캐릭터를 입력 할 수 있습니다. , 당신은 ajax를 사용해야합니다.
다음과 같이 코드 코드를 복사하십시오.
<html>
<헤드>
입력 일치 </title>가있는 <title> 텍스트 상자
<스타일>
몸, div {
유대 가족 : Verdana;
라인 높이 : 100%;
글꼴 크기 : 10pt;
}
입력 {
너비 : 320px;
}
H1 {
텍스트 정렬 : 센터;
글꼴 크기 : 2.2EM;
}
#divc {
테두리 : 1px 고체 #555;
}
.des {
너비 : 500px;
배경색 : Lightyellow;
테두리 : 1px 고체 #555;
패딩 : 25px;
마진-탑 : 25px;
}
.mouseover {
색상 : #ffffff;
배경색 : 하이라이트;
너비 : 100%;
커서 : 기본값;
}
. 마우스 아웃 {
색상 :#000;
너비 : 100%;
배경색 : #ffffff;
커서 : 기본값;
}
</스타일>
<script language = "javaScript">
<!-
기능 jsauto (InstanceName, objid)
{{
this._msg = [];
this._x = null;
this._o = document.getElementById (objid);
if (! this._o) 반환;
this._f = null;
this._i = instanceName;
this._r = null;
this._c = 0;
this._s = false;
this._v = null;
this._o.style.visibility = "숨겨진";
this._o.style.position = "절대";
this._o.style.zindex = "9999";
this._o.style.overflow = "Auto";
this._o.style.height = "50";
이것을 반환하십시오;
};
jsauto.prototype.directionkey = function () {with (this)
{{
var e = _e.keycode?
var l = _o.childnodes.length;
(_c> l-1 || _c <0) _s = 거짓 : "";
if (e == 40 && _s)
{{
_o.childnodes [_c] .classname = "마우스 아웃";
(_c> = l-1)? _c = 0 : _c ++;
_o.ChildNodes [_c] .className = "MouseOver";
}
if (e == 38 && _s)
{{
_o.childnodes [_c] .classname = "마우스 아웃";
_c-<= 0?
_o.ChildNodes [_c] .className = "MouseOver";
}
if (e == 13)
{{
if (_o.childnodes [_c] && _o.style.visibility == "Visible")
{{
_r.value = _x [_c];
_o.style.visibility = "숨겨진";
}
}
if (! _s)
{{
_c = 0;
_o.ChildNodes [_c] .className = "MouseOver";
_s = 참;
}
}};
// mouseevent.
jsauto.prototype.domouseover = function (obj) {with (this)
{{
_o.childnodes [_c] .classname = "마우스 아웃";
_c = 0;
obj.tagname == "div"?
}};
jsauto.prototype.domouseOut = function (OBJ)
{{
obj.tagname == "div"?
};
jsauto.prototype.doclick = function (msg) {with (this)
{{
if (_r)
{{
_r.Value = msg;
_o.style.visibility = "숨겨진";
}
또 다른
{{
ALERT ( "JavaScript AutoComplete 오류 :/n/n은 반환 객체를 얻을 수 없습니다.");
반품;
}
}};
// 객체 메소드;
jsauto.prototype.item = function (msg)
{{
if (msg.indexof ( ",")> 0)
{{
var arrmsg = msg.split ( ",");
for (var i = 0; i <arrmsg.length; i ++)
{{
arrmsg [i]? _msg.push (arrmsg [i]) : "";
}
}
또 다른
{{
this._msg.push (msg);
}
this._msg.sort ();
};
jsauto.prototype.append = function (msg) {with (this)
{{
_i? ": _i = 평가 (_i);
_x.push (msg);
var div = document.createelement ( "div");
// 객체에 이벤트를 바인딩합니다.
Div.onMouseOver = function () {_ I. DomouseOver (this)};
Div.onMouseOut = function () {_ I. DomouseOut (this)};
div.onclick = function () {_ i.doclick (msg)};
var re = new regexp ( "(" + _v + ")", "i");
div.style.lineHeight = "140%";
Div.ClassName = "마우스 아웃";
if (_v) div.innerhtml = msg.replace (re, <strong> $ 1 </strong> ");
div.style.fontfamily = "Verdana";
_o.appendChild (div);
}};
jsauto.prototype.display = function () {with (this)
{{
if (_f && _v! = "")
{{
_o.style.left = _r.offsetleft;
_o.style.width = _r.offsetWidth;
_o.style.top = _r.offsettop + _r.offsetheight;
_o.style.visibility = "Visible";
}
또 다른
{{
_o.style.visibility = "숨겨진";
}
}};
jsauto.prototype.handleevent = function (fvalue, fid, event) {with (this)
{{
var re;
_e = 이벤트;
var e = _e.keycode?
_x = [];
_f = 거짓;
_r = document.getElementById (fid);
_v = fvalue;
_i = 평가 (_i);
re = new regexp ( "^" + fvalue + "", "i");
_o.innerhtml = "";
for (var i = 0; i <_msg.length; i ++)
{{
if (re.test (_msg [i]))
{{
_i.append (_msg [i]);
_f = 참;
}
}
_i? _i.display () : alert ( "인스턴스를 얻을 수 없음");
if (_f)
{{
if ((E == 38 || e == 40 || e == 13))
{{
_i.directionkey ();
}
또 다른
{{
_c = 0;
_o.ChildNodes [_c] .className = "MouseOver";
_s = 참;
}
}
}};
window.onerror = 새 함수 ( "return true;");
//->
</스크립트>
</head>
<body>
<div id = "divc">
<!-이것은 자동 완성 컨테이너입니다 .->
</div>
<div align = "center">
<input onkeyup = "jsautoinstance.handleevent (this.value, 'auto', event)"id = "auto">
</div>
<script language = "javaScript">
<!-
var jsautoinstance = new JSauto ( "jsautoinstance", "divc");
JSAUTOINSTANCE.ITEM ( "A- 스타트, B- 스타트, C- 스타트, D- 스타트, E- 스타트, F- 스타트, G- 스타트, H- 스타트, I- 스타트, J- 스타트, K- 스타트, L. -Start, M-Start, N-Start, O-Start, P-Start, Q-Start, R-Start, S-Start, T-Start, U-Start, V-Start, W-Start, X-Start , y- 스타트, Z- 스타트, Z- 스타트, A- 스타트, B- 스타트, C- 스타트, D- 스타트, E- 스타트, F- 스타트, G- 스타트, H- 스타트, I- 스타트, J. -Start, K-Start, L-Start, M-Start, N-Start, O-Start, P-Start, Q-Start, R-Start, S-Start, T-Start, U-Start, V-Start , V- 스타트, W- 스타트, X- 스타트, Y- 스타트, Z- 스타트, U- 스타트, V- 스타트, W- 스타트, X- 스타트, Y- 스타트, Z- 스타트, Z- 스타트, a -Start, B-Start, C-Start, Y-Start, Z-Start, Z-Start, A-Start, B-Start, C-Start, D-Start, E-Start, F-Start, G-Start , H- 스타트, I- 스타트, S- 스타트, W- 스타트, X- 스타트, y- 스타트, Z- 스타트, Z- 스타트, A- 스타트, B- 시작, C- 스타트, D- 스타트, e -Start, F -Start, G-Start, H-Start, I-Start, A-Start, B-Start, C-Start, D-Start, E-Start, Z-Start, Z-Start ");
jsautoinstance.item ( "BlueDestiny");
jsautoinstance.item ( "Bluemiracle, Blue");
jsautoinstance.item ( "Angela, Geniuslau");
JSAUTOINSTANCE.ITEM ( "Never Online");
//->
</스크립트>
<centre> 입력 상자에 편지를 입력하십시오 : </center>
</body>
</html>