Question

我正在尝试完成一个Web开发课程的作业，并且无法弄清楚我在这里做错了什么。我在我的教科书中遵循了一些例子，但不幸的是，他们对这项任务的性质似乎并不直观。我想要完成的是让用户在表单中输入内容，然后只要表单失去焦点就可以将整个句子大写，然后每当它获得焦点时将其转换回小写。

我已经对此进行了搜索，而我遇到的所有内容似乎都比我想要做的要复杂得多;我需要一个简单的例子，这样我才能理解它，你知道，实际上是在学习它。

以下是我到目前为止的情况。我一直在使用chrome和firefox。 firefox一直给我的一个错误是“string1.toLowerCase（）”不是一个函数，虽然我确定我之前已经使用过了....我把它从我的教科书中拿出来。

 <html>
      <title>Project 13 - JavaScript Events</title>
      <script type="text/javascript">
         <!--

          function start() {

              capitalizeInput();
              lowercaseInput();

          }


         function capitalizeInput() { 

            // I imagine this should basicaly look the same as the "lowercaseInput" function, except with blur instead of focus

         } // end function capitalizeInput

         function lowercaseInput()
         {
             var string1 = "";
             string1  = document.getElementById('inputVal')
             var lowerCaseString = string1.toLowerCase();
             documnet.getElementById('inputVal').addEventListener("focus", function () { document.getElementById('inputVal').innerHTML = lowerCaseString }, false); 

         } // end function lowercaseInput

         window.addEventListener("load", start, false);


      </script>
   </head>
   <body>
      <form action="">
         <p>Enter a sentence and click outside the text entry box to capitalize all the letters.
         </p><p>Click in the text entry box to un-capitalize all the letters.<br><br>
         <input id="inputVal" type="text" size="60">
      </p></form>

      <div id ="something">This does something, maybe... </div>

</body></html>

“div Id”只是一个测试。我实际上希望这显示“inputVal”Id中的所有内容。当我完成后，“某事”将不会成为其中的一部分。

任何帮助将不胜感激

1 个答案:

答案 0 :(得分：1)

Answer 1

看看我为你准备的example。我觉得你太复杂了。当你将该事件监听器添加到'window'对象时，你所说的是当窗口加载时，浏览器应该运行start函数，该函数依次运行其他两个函数。

您真正想要做的就是将事件监听器注册到您的输入中，如下所示：

document.getElementById('inputVal').addEventListener("focus", capitalizeInput, false);
document.getElementById('inputVal').addEventListener("blur", lowercaseInput, false);

在这里，您将输入框中的'focus'事件绑定到函数capitalizeInput，将'blur'事件绑定到lowercaseInput。然后，您所要做的就是操纵输入中的任何内容。

你在原来的功能中做错的是：

string1  = document.getElementById('inputVal')

您所做的是将string1分配给元素，而不是文本值。如果你执行console.log(document.getElementById('inputVal'))，你会看到结果是一个对象，而不是一个字符串。如果您想要输入的值，那么您可以使用document.getElementById('inputVal').value（如我的链接示例中所示）。

初学者尝试使用Focus / Blur：JavaScript

1 个答案: