我正在尝试编辑TextboxList JS插件以支持RTL语言(下面用css播放了一下)。现在,在我输入每个单词之后,似乎光标正在消失 - 如何将光标设置为在我打印的术语
之后完全显示/* TextboxList sample CSS */
ul.holder {
margin: 0;
border: 1px solid #999;
overflow: hidden;
height: auto !important;
height: 1%;
padding: 4px 5px 0;
}
*:first-child+html ul.holder {
padding-bottom: 2px;
}
* html ul.holder {
padding-bottom: 2px;
} /* ie7 and below */
ul.holder li {
float: right;
list-style-type: none;
margin: 0 5px 4px 0;
}
ul.holder li.bit-box, ul.holder li.bit-input input {
font: 11px "Lucida Grande", "Verdana";
}
ul.holder li.bit-box {
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #CAD8F3;
background: #DEE7F8;
padding: 1px 5px 2px;
}
ul.holder li.bit-box-focus {
border-color: #598BEC;
background: #598BEC;
color: #fff;
}
ul.holder li.bit-input input {
width: 150px;
margin: 0;
border: none;
outline: 0;
padding: 3px 0 2px;
} /* no left/right padding here please */
ul.holder li.bit-input input.smallinput {
width: 20px;
}
/* Facebook demo CSS */
form, #add {
border: 1px solid #999;
width: 550px;
margin: 50px;
padding: 20px 30px 10px;
}
form ol {
font: 11px "Lucida Grande", "Verdana";
margin: 0;
padding: 0;
}
form ol li.input-text {
margin-bottom: 10px;
list-style-type: none;
border-bottom: 1px dotted #999;
padding-bottom: 10px;
}
form ol li.input-text label {
font-weight: bold;
cursor: pointer;
display: block;
font-size: 13px;
margin-bottom: 10px;
}
form ol li.input-text input {
width: 500px;
padding: 5px 5px 6px;
font: 11px "Lucida Grande", "Verdana";
border: 1px solid #999;
}
form ul.holder {
width: 500px;
}
#facebook-list ul.holder li.bit-box, #apple-list ul.holder li.bit-box {
padding-right: 15px;
position: relative;
}
#apple-list ul.holder li.bit-input {
margin: 0;
}
#apple-list ul.holder li.bit-input input.smallinput {
width: 5px;
}
ul.holder li.bit-hover {
background: #BBCEF1;
border: 1px solid #6D95E0;
}
ul.holder li.bit-box-focus {
border-color: #598BEC;
background: #598BEC;
color: #fff;
}
ul.holder li.bit-box a.closebutton {
position: absolute;
right: 4px;
top: 5px;
display: block;
width: 7px;
height: 7px;
font-size: 1px;
background: url('close.gif');
}
ul.holder li.bit-box a.closebutton:hover {
background-position: 7px;
}
ul.holder li.bit-box-focus a.closebutton, ul.holder li.bit-box-focus a.closebutton:hover {
background-position: bottom;
}
/* Autocompleter */
#facebook-auto {
display: none;
position: absolute;
width: 512px;
background: #eee;
}
#facebook-auto .default {
padding: 5px 7px;
border: 1px solid #ccc;
border-width: 0 1px 1px;
}
#facebook-auto ul {
display: none;
margin: 0;
padding: 0;
}
#facebook-auto ul li {
padding: 5px 12px;
margin: 0;
list-style-type: none;
border: 1px solid #ccc;
border-width: 0 1px 1px;
font: 11px "Lucida Grande", "Verdana";
}
#facebook-auto ul li em {
font-weight: bold;
font-style: normal;
background: #ccc;
}
#facebook-auto ul li.auto-focus {
background: #4173CC;
color: #fff;
}
#facebook-auto ul li.auto-focus em {
background: none;
}
#demo ul.holder li.bit-input input {
padding: 2px 0 1px;
border: 1px solid #999;
}
#add a {
color: #666;
}
#add-test {
width: 100px;
padding: 2px;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>TextboxList + Autocomplete demo</title>
<link rel="stylesheet" href="~/Content/test.css" type="text/css" media="screen" title="Test Stylesheet" charset="utf-8" />
<script src="~/Scripts/mootools-beta-1.2b1.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="textboxlist.js" type="text/javascript" charset="utf-8"></script>-->
<script src="~/Scripts/textboxlist.js" type="text/javascript" charset="utf-8"></script>
<script src="~/Scripts/test.js" type="text/javascript" charset="utf-8"></script>
</head>
<body id="test">
<h1>TextboxList + Autocomplete Demo</h1>
<p><a href="http://devthought.com/textboxlist-meets-autocompletion/">See article page</a>, <a href="http://devthought.com/textboxlist-fancy-facebook-like-dynamic-inputs/">Go to TextboxList article</a></p>
<form action="test_submit" method="get" accept-charset="utf-8">
<ol>
<li class="input-text">
<label>Simple input</label>
<input type="text" name="testinput" value="" id="testinput" />
</li>
<li id="facebook-list" class="input-text">
<label>FacebookList input</label>
<input type="text" value="" id="facebook-demo" />
<div id="facebook-auto">
<div class="default">Type the name of an argentine writer you like</div>
<ul class="feed">
<li>Jorge Luis Borges</li>
<li>Julio Cortazar</li>
</ul>
</div>
<!-- These two writers will be added when the control is loaded -->
</li>
</ol>
</form>
</body>
</html>