Question

我的示例键盘布局如下所示：点击屏幕上的每个数字，我想在文本区域更新它。点击退格键，我想删除最后一个号码。点击清除全部，需要清除完整的文本。点击导航键＆lt; ＆GT;光标应在文本区域中向前和向后移动。有没有办法只用CSS3来实现这个目的？ [不使用Javascript？] 如果没有，你能建议最好的选择吗？ [注意：我没有在页面上使用任何javascript，所以添加像jQuery这样的东西会增加页面加载时间的开销]

<html><head>
    <style> .vKeyboardSplKeys {
    background-color:#DEDBE4 ;
    border:1px solid #666666;
    display:inline-block;
    color:#000000;
    font-family:arial;  
    font-weight:bold;
    padding:3px 6px;
    margin : 2px;
    cursor:pointer;
}
.vKeyboardSplKeysHover {
    background-color:#8cb82b;
}.vKeyboardSplKeys:active {
    position:relative;
    top:1px;
}

.vKeyboardKeys {
    width:9px;
    background-color:#EEEEEE;
    border:1px solid #666666;
    display:inline-block;
    color:#000000;
    font-family:arial;  
    font-weight:bold;
    padding:3px 8px;
    margin : 2px;
    cursor:pointer;
}.vKeyboardKeysHover {
    background-color:#CEE9FC;
}.vKeyboardKeys:active {
    position:relative;
    top:1px;
}

.space {
    padding : 3px 40px;
}

#vKeyboard{
    border : 1px solid #DDDDDDD;
    background-color : #F4F4F4;
    padding:5px;
    text-align:center;
} </style>
</head>
<body>
    <center><input type="text" id="answer" value="">
    <div id="vKeyboard" style="width: 100px;"><span class="vKeyboardSplKeys vKeyboardSplKeysHover" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;">Backspace</span><br><span class="vKeyboardKeys" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;">7</span><span class="vKeyboardKeys" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;">8</span><span class="vKeyboardKeys" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;">9</span><br><span class="vKeyboardKeys" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;">4</span><span class="vKeyboardKeys" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;">5</span><span class="vKeyboardKeys" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;">6</span><br><span class="vKeyboardKeys" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;">1</span><span class="vKeyboardKeys" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;">2</span><span class="vKeyboardKeys" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;">3</span><br><span class="vKeyboardKeys" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;">0</span><span class="vKeyboardKeys" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;">.</span><span class="vKeyboardKeys" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;">-</span><br><span class="vKeyboardSplKeys" data="left" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;">&larr;</span><span class="vKeyboardSplKeys" data="right" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;">&rarr;</span><br><span class="vKeyboardSplKeys" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;">Clear All</span><br></div></center>
</body></html>

Answer 1

有足够的HTML和CSS可以做任何事情;但是，我们说的是20×n！元素，它肯定比等效的JavaScript重。

如果你想继续追求它，它看起来像

<div id="initial">
    <a href="#1">1</a>
    <a href="#2">2</a>
    …
</div>
<div id="1">
    <a href="#11">1</a>
    <a href="#12">2</a>
    …
</div>

然后你创建了CSS来放置显示框（必须在键盘上方的键盘之后），然后用键盘创建相同数量的CSS规则。 {1}}和#1:target ~ #input::after属性可显示内容。您也无法使用content。

创建一个光标将使尽可能多的工作位置在框中（1 +最大长度）。可能会在那里抛出另一个因子，除非你能让CSS变得更聪明 - 虽然不是很好的努力权衡，但你现在已经使用程序生成了这个因素。

如果之前我不清楚，使用CSS是非常不合适的。您正在寻找的是行为，而不是演示，因此属于JavaScript，而不是CSS。

也许甚至是<input>？

Answer 2

使用简单的javascript尝试此操作，在此示例中，您不需要包含任何js文件：

在下面的示例中，我创建了一个简单的javascript函数getValue（），它将为您执行所需的任务。此外，我仅使用数字7实现了此功能。你必须根据你的需要编写这个函数......

<html>
  <head>
    <style>
      .vKeyboardSplKeys {
        background-color:#DEDBE4 ;
        border:1px solid #666666;
        display:inline-block;
        color:#000000;
        font-family:arial;

        font-weight:bold;
        padding:3px 6px;
        margin : 2px;
        cursor:pointer;
      }
      .vKeyboardSplKeysHover {
        background-color:#8cb82b;
      }
      .vKeyboardSplKeys:active {
        position:relative;
        top:1px;
      }

      .vKeyboardKeys {
        width:9px;
        background-color:#EEEEEE;
        border:1px solid #666666;
        display:inline-block;
        color:#000000;
        font-family:arial;

        font-weight:bold;
        padding:3px 8px;
        margin : 2px;
        cursor:pointer;
      }
      .vKeyboardKeysHover {
        background-color:#CEE9FC;
      }
      .vKeyboardKeys:active {
        position:relative;
        top:1px;
      }

      .space {
        padding : 3px 40px;
      }

      #vKeyboard{
        border : 1px solid #DDDDDDD;
        background-color : #F4F4F4;
        padding:5px;
        text-align:center;
      }

  </style>
  <script>
    function getValue(val)
    {

      document.getElementById('answer').value = val;
    }
  </script>
  </head>
  <body>
    <center>
      <input type="text" id="answer" value="">

      <div id="vKeyboard" style="width: 100px;">
        <span class="vKeyboardSplKeys vKeyboardSplKeysHover" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;">
          Backspace
        </span>
        <br>
        <span onclick="getValue(7);" class="vKeyboardKeys" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;">
          7
        </span>
        <span class="vKeyboardKeys" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;">
          8
        </span>
        <span class="vKeyboardKeys" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;">
          9
        </span>
        <br>
        <span class="vKeyboardKeys" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;">
          4
        </span>
        <span class="vKeyboardKeys" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;">
          5
        </span>
        <span class="vKeyboardKeys" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;">
          6
        </span>
        <br>
        <span class="vKeyboardKeys" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;">
          1
        </span>
        <span class="vKeyboardKeys" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;">
          2
        </span>
        <span class="vKeyboardKeys" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;">
          3
        </span>
        <br>
        <span class="vKeyboardKeys" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;">
          0
        </span>
        <span class="vKeyboardKeys" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;">
          .
        </span>
        <span class="vKeyboardKeys" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;">
          -
        </span>
        <br>
        <span class="vKeyboardSplKeys" data="left" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;">
          &larr;
        </span>
        <span class="vKeyboardSplKeys" data="right" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;">
          &rarr;
        </span>
        <br>
        <span class="vKeyboardSplKeys" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;">
          Clear All
        </span>
        <br>
      </div>

  </center>
  </body>
</html>

是否可以使用css3更新输入类型文本？

2 个答案: