Question

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

我想在输入空格键时在<li>之间生成一个空格。为此，我创建了一个空白的<li>元素，其中包含一个“ejotyBlank”类。但由于某些原因，这对我不起作用！
当用户点击退格键时，应删除最后一个<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("&nbsp;&nbsp;"));
        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)
    }


} });

}）;

完成我的jQuery输入功能

1 个答案: