Question

我在jsFiddle上制作了一个没有插件的键盘。我创建了键盘，现在我正在添加空格键。您可能已经猜到，当您单击空格键时，我希望它添加一个空格。我用以下代码尝试了这个：

if ($('.space').click() == true) {
  $('h1').append(' ');
}

对于所有按钮：

$(document).ready(function() {
     $('button').click(function() {
         $('h1').append(this.textContent);
     });
});

但这不允许任何按钮正常工作。这段代码会起作用，还是我完全错了？

Answer 1

http://jsfiddle.net/v9WpS/

 $(document).ready(function() {
         $('button').click(function() {
             if(this.textContent == 'Space'){
              $('h1').append('&nbsp;');
             }else{
              $('h1').append(this.textContent);
             }
         });
    });

Answer 2

最简单的解决方案是用

替换<button class='space'>Space</button>

<button class='space'> </button>

空格键通常不包含任何文字，也不需要任何文字。

如果您确实想在空格键中显示可见文字并使用button元素，请在空格键按钮中添加值属性，

<button class='space' value='space'>Space</button>

并使用以下代码（如果存在则只使用value属性，否则使用按钮的文本内容）：

$(document).ready(function() {
     $('button').click(function() {
         $('h1').append(this.value || this.textContent);
     });
});

这种方法更灵活，因为这样你可以使字母按钮在它们中有大写字母，但仍然使它们添加小写字母，这是键盘通常做的。然后，您将使用<button class='a' value='a'>A</button>等。顺便说一下，您可能不需要class属性。）

在线键盘添加空间

2 个答案: