完成我的jQuery输入功能

Question

现在我有一些代码生成<li>元素，它具有高度和宽度并且应用了特定的背景图像。当用户按下一个键，匹配CSS类被激活到创建<li>创建屏幕上的某个字符。我有两个问题，积极...

1. 我想<li>'之间产生空间当键入空格键时。为此，我创建了一个包含“   ”的空白<li>元素，其中包含一个“ejotyBlank”类。但由于某种原因，这对我不起作用！

2. 当用户单击退格时，应删除最后一个<li>。我甚至不知道从哪里开始解决这个问题。

我现在所做的创建一个数组，并添加到它的每一个键被按下时则使用一个for循环来生成所有<li>的到页面上，这一切的权利。

您可以访问该页面及其在此页上的操作：ImASpy.com/Ejoty 单击标题内：并开始键入字母。

我肯定不是全部适用，尤其是CSS，但这里也是我的代码....

谢谢你这么这么多，谁帮我完成这个的人！

这里是我的jQuery：

$(document).ready(function() { 

var maxWidth = 0; 
var titleArray = new Array; 
var nameArray = new Array; 
var i = 0; 
var letterWidth; 

$('#ejotyTitleInput').keypress(function(e) 
{ 
    var letterValue = String.fromCharCode(e.which); 

if (e.which == 8) { 
       e.preventDefault(); 
       alert('back space'); 
      } 
    if(e.which==32){ 
     var newNode = document.createElement("li"); 
     $(newNode).addClass("ejotyBlank"); 
     newNode.appendChild(document.createTextNode("  ")); 
     titleArray[i] = newNode; 
    } 


    if (letterValue.match(/[a-zA-Z\.]/)) 
    letterValue = letterValue.toUpperCase(); 
    letterValue = "ejoty" + letterValue; 


    var newNode = document.createElement("li"); 
    $(newNode).addClass(letterValue); 

    nameArray[i] = letterValue; 
    titleArray[i] = newNode; 
    i++; 


    maxWidth = 0; 
    letterWidth = 0; 
    for(var x = 0;x<=titleArray.length;++x){ 
     var currentLI = titleArray[x]; 
     $("ul#ejotyTitle").append(currentLI); 
     letterWidth += $("." + nameArray[x]).width() + 3; 
     var currentLetterWidth = $("." + nameArray[x]).width(); 
     maxWidth = maxWidth + currentLetterWidth; 
     $("ul#ejotyTitle").css("width", letterWidth) 
    } 
}); 

}); 

这里是我的HTML代码：

<footer id="page1"> 
    <h2>Now you try!</h2> 
    <form id="ejotyCreator"> 
     <table> 
     <tr> 
     <td>Title:</td> 
     <td><input type="text" id="ejotyTitleInput" name="title" /></td> 
     </tr> 
     <tr> 
     <td>Text:</td> 
     <td><textarea name="ejotyText" cols="20" rows="2" id="ejotyText"></textarea></td> 
     </tr> 
     <tr> 
     <td>Signed:</td> 
     <td><input type="text" id="ejotySig" name="title"/></td> 
     </tr> 

     </table> 
    </form> 
    </footer><!-- end page1 footer --> 


<section id="rightPage" class="clearfix"> 

       <ul class="ejotyWriting clearfix"> 
        <li class="ejotyT"></li> 
        <li class="ejotyH"></li> 
        <li class="ejotyI"></li> 
        <li class="ejotyS"></li> 
        <li>&nbsp;</li> 
        <li class="ejotyI"></li> 
        <li class="ejotyS"></li> 
        <li>&nbsp;</li> 
        <li class="ejotyE"></li> 
        <li class="ejotyJ"></li> 
        <li class="ejotyO"></li> 
        <li class="ejotyT"></li> 
        <li class="ejotyY"></li> 
        <li class="ejotyOther">-</li> 
        <li class="ejotyZ"></li> 
        <li>...</li> 
       </ul> 
        <br /> 
        <br /> 
       <div id="centerTitle"> 
       <ul class="ejotyWriting clearfix" id="ejotyTitle"> 
       </ul><!-- end title --> 
       </div><!--end centerTitle --> 
        <br /> 
       <ul class="ejotyWriting clearfix" id="ejotyUserContent" >  
       </ul><!-- end ejotyContent --> 
        <br /> 

       <ul class="ejotyWriting clearfix" id="ejotySigniature"> 
       </ul><!-- end ejotyContent --> 


     </section><!-- end rightPage --> 

这里是我的CSS：

/************* EJOTYZ CONTENT *************/ 


section, footer { 
    display: block; 
} 


table, tr, td { 
    margin: 0; 
    padding: 0; 
} 
form { 
    padding: 0; 
    margin: 0; 
} 
td.subtractMargin { 
    margin-top: 15px; 
} 

h2 { 
    color: #333; 
    margin: 0 0 0 0px; 
    padding: 0; 
    text-decoration: underline; 
} 

textarea { 
    resize: none; 
    margin: 0 0 -6px 10px; 
    padding: 5px; 
} 



input { 
    margin: 0 0 0 10px; 
    padding: 5px; 
    color: #000; 
} 

footer#page1 { 
    width: 260px; 
    height: 80px; 
    position: absolute; 
    top: 350px; 
    left: 45px; 
} 

section#rightPage { 
    width: 320px; 
    height: 390px; 
    position: absolute; 
    top: 15px; 
    left: 355px; 
    overflow: auto; 
} 


hr { 
    border-top-width: 2px; 
    border-top-style: dotted; 
    border-right-style: none; 
    border-bottom-style: none; 
    border-left-style: none; 
    border-top-color: #333; 
    border-right-color: #333; 
    border-bottom-color: #333; 
    border-left-color: #333; 
    width: 275px; 
    margin: -1px 0 15px 10px; 
} 
footer#page2 { 
    width: 270px; 
    height: 80px; 
    position: absolute; 
    top: 405px; 
    left: 395px;  
} 

ul#ejoty { 
    padding: 0; 
    margin: 0 0 0 35px; 
} 

ul#ejoty li { 
    list-style: none; 
    display: block; 
    float: left; 
    color: #000; 
    margin-right: 2px; 
} 

ul.ejotyWriting { 
    padding: 0; 
    margin: 0 0 0 5px; 
} 

ul.ejotyWriting li { 
    list-style: none; 
    display: block; 
    float: left; 
    color: #000; 
    margin-right: 2px; 
} 

h1.bookTitle { 
    color: #333; 
    margin-left: 15px; 
} 

ul#ejotyUserContent { 
background: #3F9; 
width: auto; 
} 


div#centerTitle { 
padding: 0px 5px 5px 5px; 
width: 300px; 
text-align: center; 
margin: 0 auto; 
} 

ul#ejotyTitle { 
max-width: 300px; 
margin: 0 auto; 
} 




/************* EJOTYZ LETTERS *************/ 

.ejotyBlank { 
height:12px; 
width:43px; 
margin-top: 5px; 
} 

.ejotyOther { 
height:12px; 
} 


.ejotyB{ 
height:12px; 
width:34px; 
margin-top: 5px; 
background:url(images/ejoty.png) -50px 1px no-repeat; 
} 

.ejotyC{ 
height:12px; 
width:27px; 
margin-top: 5px; 
background:url(images/ejoty.png) -90px 1px no-repeat; 
} 

.ejotyD{ 
height:12px; 
width:19px; 
margin-top: 5px; 
background:url(images/ejoty.png) -123px 1px no-repeat; 
} 

.ejotyE{ 
height:12px; 
width:10px; 
margin-top: 5px; 
background:url(images/ejoty.png) -149px 1px no-repeat; 
} 

.ejotyF{ 
height:12px; 
width:43px; 
margin-top: 5px; 
background:url(images/ejoty.png) -1px -20px no-repeat; 
} 

.ejotyG{ 
height:12px; 
width:35px; 
margin-top: 5px; 
background:url(images/ejoty.png) -49px -20px no-repeat; 
} 

.ejotyH{ 
height:12px; 
width:27px; 
margin-top: 5px; 
background:url(images/ejoty.png) -90px -20px no-repeat; 
} 

.ejotyI{ 
height:12px; 
width:19px; 
margin-top: 5px; 
background:url(images/ejoty.png) -124px -20px no-repeat; 
} 

.ejotyJ{ 
height:12px; 
width:14px; 
margin-top: 5px; 
background:url(images/ejoty.png) -150px -20px no-repeat; 
} 

.ejotyK{ 
height:12px; 
width:45px; 
margin-top: 5px; 
background:url(images/ejoty.png) -1px -44px no-repeat; 
} 

.ejotyL{ 
height:12px; 
width:36px; 
margin-top: 5px; 
background:url(images/ejoty.png) -50px -44px no-repeat; 
} 

.ejotyM{ 
height:12px; 
width:28px; 
margin-top: 5px; 
background:url(images/ejoty.png) -92px -44px no-repeat; 
} 

.ejotyN{ 
height:12px; 
width:20px; 
margin-top: 5px; 
background:url(images/ejoty.png) -125px -44px no-repeat; 
} 

.ejotyO{ 
height:12px; 
width:16px; 
margin-top: 5px; 
background:url(images/ejoty.png) -150px -44px no-repeat; 
} 

.ejotyP{ 
height:12px; 
width:44px; 
margin-top: 5px; 
background:url(images/ejoty.png) -1px -66px no-repeat; 
} 

.ejotyQ{ 
height:12px; 
width:36px; 
margin-top: 5px; 
background:url(images/ejoty.png) -49px -66px no-repeat; 
} 

.ejotyR{ 
height:12px; 
width:28px; 
margin-top: 5px; 
background:url(images/ejoty.png) -92px -66px no-repeat; 
} 

.ejotyS{ 
height:12px; 
width:20px; 
margin-top: 5px; 
background:url(images/ejoty.png) -125px -66px no-repeat; 
} 

.ejotyT{ 
height:12px; 
width:16px; 
margin-top: 5px; 
background:url(images/ejoty.png) -151px -66px no-repeat; 
} 

.ejotyU{ 
height:12px; 
width:44px; 
margin-top: 5px; 
background:url(images/ejoty.png) -1px -88px no-repeat; 
} 

.ejotyV{ 
height:12px; 
width:36px; 
margin-top: 5px; 
background:url(images/ejoty.png) -49px -88px no-repeat; 
} 

.ejotyW{ 
height:12px; 
width:28px; 
margin-top: 5px; 
background:url(images/ejoty.png) -92px -88px no-repeat; 
} 

.ejotyX{ 
height:12px; 
width:20px; 
margin-top: 5px; 
background:url(images/ejoty.png) -124px -88px no-repeat; 
} 

.ejotyY{ 
height:12px; 
width:16px; 
margin-top: 5px; 
background:url(images/ejoty.png) -151px -88px no-repeat; 
} 

.ejotyZ{ 
height:12px; 
width:16px; 
margin-top: 5px; 
background:url(images/ejoty.png) 0px -109px no-repeat; 
} 

.ejotyA{ 
height:12px; 
width:43px; 
margin-top: 5px; 
background:url(images/ejoty.png) -1px 1px no-repeat; 
} 

Answer 1

好吧，让我们再次开始这个乐趣。我已经完成了一些调试并逐步完成了代码，并且发现了真正的问题。由于ejotyz.html的第41行，你没有得到适用于你的新li元素的“ejotyBlank”类，所以你正吹走你在上面定义的“newNode”值。将第40-48行更改为：

if (letterValue.match(/[a-zA-Z\.]/)) 
{ 
    letterValue = letterValue.toUpperCase(); 
    letterValue = "ejoty" + letterValue; 


    var newNode = document.createElement("li"); 
    $(newNode).addClass(letterValue); 

} 

关于您的退格问题，我认为您将不得不以其他方式解决问题。您当前（初始启动）方法的问题在于您基本上假定退格输入在字符串的末尾。这可能不是一个有效的假设。在这种情况下，你不能放弃最后的“字符” - 而是必须重新构建整个字符串。而且，按下按键时，按键不会被触发，从我所知道的情况来看。所以我会将它改为keyup。你的keyup函数应该用当前文本重建的新列表替换整个UI部分。如果你需要帮助写一个函数来做到这一点，让我知道。

而完整的解决方案，因为在这里看到http://jsfiddle.net/LcbQn/3/

的$（document）。准备（函数（）{

$（ '＃ejotyTitleInput'）KEYUP（函数（E）{

var fullString = $(this).val(); 
var maxWidth = 0; 
var titleArray = new Array; 
var nameArray = new Array; 
var i = 0; 
var letterWidth; 

$("ul#ejotyTitle").empty(); 
for (var k=0;k<fullString.length;k++) 
{ 
    var letterValue = fullString.substr(k,1); 

    if(letterValue == ' '){ 
     var newNode = document.createElement("li"); 
     $(newNode).addClass("ejotyBlank").html("&nbsp;&nbsp;"); 
     titleArray[i] = newNode; 
     nameArray[i] = "ejotyBlank"; 
    } else if (letterValue.match(/[a-zA-Z\.]/)) 
    { 
     letterValue = letterValue.toUpperCase(); 
     letterValue = "ejoty" + letterValue; 


     var newNode = document.createElement("li"); 
     $(newNode).addClass(letterValue); 
     nameArray[i] = letterValue; 
     titleArray[i] = newNode; 
    } 
    i++; 


    maxWidth = 0; 
    letterWidth = 0; 
    for(var x = 0;x<=titleArray.length;++x){ 
     var currentLI = titleArray[x]; 
     $("ul#ejotyTitle").append(currentLI); 
     letterWidth += $("." + nameArray[x]).width() + 3; 
     var currentLetterWidth = $("." + nameArray[x]).width(); 
     maxWidth = maxWidth + currentLetterWidth; 
     $("ul#ejotyTitle").css("width", letterWidth) 
    } 


} }); 

}）;