javascript - 完成我的 jQuery 打字功能

Question

现在我有一些代码可以生成 <li>具有高度和宽度并应用了特定背景图像的元素。当用户按下某个键时，匹配的 css 类将被激活到创建的 <li> 上。在屏幕上创建某个 Angular 色..我有两个活跃的问题...

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

好吧，让我们重新开始这个乐趣。我已经对您的代码进行了一些调试和单步调试，并且发现了真正的问题。您没有将“ejotyBlank”类应用于新的 li 元素，因为在 ejotyz.html 的第 41 行，您正在消除上面定义的“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).ready(function() {

$('#ejotyTitleInput').keyup(function(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)
    }


} });

});