制作移动键盘时遇到问题

Posted

技术标签:

【中文标题】制作移动键盘时遇到问题【英文标题】:Having trouble making a mobile keyboard 【发布时间】:2019-05-12 23:45:27 【问题描述】:

我正在制作移动键盘。我在javascript上遇到了麻烦。我知道我在 javascript 中有一个错误,因为键盘没有输入。这是我的javascript:

$(function() 
  var $write = $('#write'),
    shift = false,
    capslock = false; // This code is imported from Jquery. 
  // It defines 3 variables, textarea, a shift status, and a caps lock status.
  $('#keyboard li').click(function()  //This code creates 2 variables when a character is clicked (Not a symbol ).
    var $this = $(this),
      character = $this.html(); // If it's a lowercase letter, nothing happens to this variable

    // Code for processing the key press.
  );
);
// Shift key
if ($this.hasClass('left-shift') || $this.hasClass('right-shift'))  // If the shift key is pressed,(The shift key is left or right shift) we togle the uppercase value of each letter. 
  $('.letter').toggleClass('uppercase'); //This code calls the leter to be uppercase. 
  $('.symbol span').toggle(); //Nothing happens if it is a symbol. 

  shift = (shift === true) ? false : true; // This code sets the shift key to the opposite boolean. (If shift key= false, set it to true.)
  capslock = false; // capslock is not enabled. 
  return false; // If you hit return, the shift key switches off and makes the shift key false. 

// Caps lock
if ($this.hasClass('capslock')) 
  $('.letter').toggleClass('uppercase'); //This code gets the letters you type in and toggles their class to uppercase.  
  capslock = true; //This code sets the capslock button to true. 
  return false; // If you hit return, the caps capslock button is false and turns of. 

// Delete
if ($this.hasClass('delete'))  //This Code happens when hit the delete button.
  var html = $write.html(); // This code defines the variable HTML to the write vairiable.HTML, which gets the letters you typed in earlier. 

  $write.html(html.substr(0, html.length - 1)); //This code makes the delete button delete. The number 0 defines that it deletes the previous number and the number -1 takes away part of the string typed by the user. 
  return false;
  // Special characters
  if ($this.hasClass('symbol')) character = $('span:visible', $this).html(); //This code sets the symbol charactes' spam to visable, and gets what the characters look like from the HTML that I have typed in earlier. 
  if ($this.hasClass('space')) character = ' '; //Makes a space bettween characters and symbols typed by the user. 
  if ($this.hasClass('tab')) character = "\t" // This code uses the \t metaCharacter which finds a tab character. It returns the number in the string of where the character was found, and if the user has not typed anything, it returns -1)
  if ($this.hasClass('return')) character = "\n"; // This code uses the \n metaCharacter. If return is pressed, the computer located the user to another line. If there are no more lines, it stays on the same line.
  // Uppercase letters
  if ($this.hasClass('uppercase')) character = character.toUpperCase(); // This code defines the uppercase method and the toUpperCase method. If you have clicked shift or caps lock, it toggles the uppercase class. It would not work for me so I did some rechearch. I figured out that you need to add the toUpperCase method. The method sets any strings typed and sets the class to uppercase. (I defeined the classes in the index.HTML file.)  
  // Remove shift once a key is clicked.
if (shift === true)  //This code happenes when shift is true. (Shift is true when it is pressed.)
    $('.symbol span').toggle();  //This code happens when a symbol is pressed when shift is on
    if (capslock === false) $('.letter').toggleClass('uppercase'); // This code happens when capsLock is false and the shift key is pressed. After a character is pressed with the shift key, the shift is set to false. 

    shift = false;  //Sets the shift key to false. 



// Add the character
        $write.html($write.html() + character); //This code is the last code. It finally adds any of the characters/ symbols. The keyboard is now just a regular keyboard. 
    );

);

有人可以帮帮我吗?我已经尽我所能,但无法让它发挥作用。如果有人需要更多详细信息,请告诉我

【问题讨论】:

【参考方案1】:

试试这个按钮。

var count=0;
		$(function()                 
			var $write = $('#write'),
			shift = false,
			capslock = false;                
			$('#keyboard li').click(function() 
				var $this = $(this),
				character = $this.text();
				if($this.hasClass('return'))
					$write.append('\n');
				
				else if($this.hasClass('tab'))
					$write.append('\t');
				
				else if($this.hasClass('delete'))
					var content=$write.text();
					content=content.substring(0, content.length-1);
					$write.text(content);
				
				else if($this.hasClass('capslock'))
					toggleCase();
					if($this.hasClass('active'))
						capslock=true;
					else
						capslock=false;
					
				
				else if($this.hasClass('left-shift') || $this.hasClass('right-shift'))
					shift=!shift;
					$('.left-shift,.right-shift').toggleClass("active");
					if(shift) 
						$('.on').show();
						$('.off').hide();
						count++; 
					
					else count=0; 
				
				else if($this.hasClass('letter') || $this.hasClass('space'))
					if(shift)character=character.toUpperCase(); // Shift Key Only for Symbols and Uppercase letter.
					$write.append(character);
					count=0;
				
				else if($this.hasClass('symbol'))
					if(shift)
						character = $this.find(".on").text();
						count=0;
					
					else
						character = $this.find(".off").text();
					
					$write.append(character);
				
				if(count==0)
					shift=false;
					$('.left-shift,.right-shift').removeClass("active");
					$('.on').hide();
					$('.off').show();
				
				//alert(character);
				// Code for processing the key.
			);    
		);
		
		function toggleCase()
			var upper=/[A-Z]/;
			var lower=/[a-z]/;
			$letter=$('li.letter');
			var letter=$letter.text();
			if(lower.test(letter))
				$letter.each(function(i,ele)
					$(this).text($(this).text().toUpperCase());
				);
				$('.capslock').addClass('active');
			
			if(upper.test(letter))
				$letter.each(function(i,ele)
					$(this).text($(this).text().toLowerCase());
				);
				$('.capslock').removeClass('active');
			
		
* 
margin: 0; 
padding: 0; 

body 
font: 71%/1.5 Verdana, Sans-Serif /; 
background: #eee;

#container 
margin: 100px auto;
width: 688px;

#write 
margin: 0 0 5px;
padding: 5px;
width: 671px;
height: 200px;
font: 1em/1.5 Verdana, Sans-Serif;
background: #fff;
border: 1px solid #f9f9f9;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

#keyboard 
margin: 0;
padding: 0;
list-style: none;

    #keyboard li 
    float: left;
    margin: 0 5px 5px 0;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #fff;
    border: 1px solid #f9f9f9;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    
        .capslock, .tab, .left-shift 
        clear: left;
        
            #keyboard .tab, #keyboard .delete 
            width: 70px;
            
            #keyboard .capslock 
            width: 80px;
            
            #keyboard .return 
            width: 77px;
            
            #keyboard .left-shift 
            width: 95px;
            
            #keyboard .right-shift 
            width: 109px;
            
        .lastitem 
        margin-right: 0;
        
        .uppercase 
        text-transform: uppercase; 
        
        #keyboard .space 
        clear: left;
        width: 600px; 
        
        .on  
        display: none;
        
        #keyboard li:hover 
        position: relative;
        top: 1px;
        left: 1px;
        border-color: #e5e5e5;
        cursor: pointer;
        
		.active
			background-color:#d8d8d8 !important;
			border:1px solid #cecece !important;
		
<!DOCTYPE html PUBLIC    
<html xmlns= xml:lang="en" lang="en">
<head>
  <title>CyberStopKeyboard</title>  
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

  <div id="container">
    <textarea id="write" rows="6" cols="60"></textarea>
    <ul id="keyboard"> 
      <li class="symbol"><span class="off">`</span><span class="on">~</span></li>
      <li class="symbol"><span class="off">1</span><span class="on">!</span></li>
      <li class="symbol"><span class="off">2</span><span class="on">@</span></li>
      <li class="symbol"><span class="off">3</span><span class="on">#</span></li>
      <li class="symbol"><span class="off">4</span><span class="on">$</span></li>
      <li class="symbol"><span class="off">5</span><span class="on">%</span></li>
      <li class="symbol"><span class="off">6</span><span class="on">^</span></li>
      <li class="symbol"><span class="off">7</span><span class="on">&amp;</span></li>
      <li class="symbol"><span class="off">8</span><span class="on">*</span></li>
      <li class="symbol"><span class="off">9</span><span class="on">(</span></li>
      <li class="symbol"><span class="off">0</span><span class="on">)</span></li>
      <li class="symbol"><span class="off">-</span><span class="on">_</span></li>
      <li class="symbol"><span class="off">=</span><span class="on">+</span></li>
      <li class="delete lastitem">delete</li>
      <li class="tab">tab</li>
      <li class="letter">q</li>                      
      <li class="letter">w</li>         
      <li class="letter">e</li>
      <li class="letter">r</li>                          
      <li class="letter">t</li>
      <li class="letter">y</li>
      <li class="letter">u</li>
      <li class="letter">i</li>
      <li class="letter">o</li>
      <li class="letter">p</li>
      <li class="symbol"><span class="off">[</span><span class="on"></span></li>
      <li class="symbol"><span class="off">]</span><span class="on"></span></li>
      <li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li>
      <li class="capslock">caps lock</li>
      <li class="letter">a</li>
      <li class="letter">s</li>
      <li class="letter">d</li>
      <li class="letter">f</li>
      <li class="letter">g</li>
      <li class="letter">h</li>
      <li class="letter">j</li>
      <li class="letter">k</li>
      <li class="letter">l</li>
      <li class="symbol"><span class="off">;</span><span class="on">:</span></li>
      <li class="symbol"><span class="off">'</span><span class="on">&quot;</span></li>
      <li class="return lastitem">return</li>
      <li class="left-shift">shift</li>
      <li class="letter">z</li>
      <li class="letter">x</li>
      <li class="letter">c</li>
      <li class="letter">v</li>
      <li class="letter">b</li>
      <li class="letter">n</li>
      <li class="letter">m</li>
      <li class="symbol"><span class="off">,</span><span class="on">&lt;</span></li>
      <li class="symbol"><span class="off">.</span><span class="on">&gt;</span></li>
      <li class="symbol"><span class="off">/</span><span class="on">?</span></li>
      <li class="right-shift lastitem">shift</li>
      <li class="space lastitem">&nbsp;</li> 
    </ul>
  </div>
 </body>
</html>

【讨论】:

【参考方案2】:

有几个键盘和鼠标事件在触摸屏上根本不起作用(例如 hover、mouseenter、mouseleave 等...

https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Using_Touch_Events

但是您可以通过这种方式监听 HTML 输入元素内部的变化并过滤禁用键。

【讨论】:

以上是关于制作移动键盘时遇到问题的主要内容,如果未能解决你的问题,请参考以下文章

关于移动端的键盘兼容性总结

需要帮助建议通过键盘输入实现动画更改

Android开发里遇到键盘出现时ScrollView不能滚动,怎么解决

出现键盘时移动文本字段会覆盖(Swift)中的顶部文本字段

如何在自定义键盘中快速制作返回按钮

jquery移动端键盘keyup失效