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

【问题标题】：Is it possible to update input type text using css3?是否可以使用 css3 更新输入类型文本？
【发布时间】：2014-01-14 16:47:46
【问题描述】：

我有下面提到的示例键盘布局：单击屏幕上的每个数字时，我想在文本区域中更新它。单击退格键，我想删除最后一个数字。单击全部清除后，需要清除完整的文本。单击导航键光标应在文本区域中向前和向后移动。有没有办法只使用 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>

【问题讨论】：

标签： javascript jquery html css keyboard

【解决方案1】：

用简单的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>

【讨论】：

谢谢阿努巴夫。这非常有用。
为什么不把边框样式放在css类中？
@TheVillageIdiot 边框是指边框属性吗？
@Anubhav 是的，我知道我的意思是边框属性，但它们可以放在 cass 声明中，而不是放在每个元素中。
@TheVillageIdiot 绝对我刚刚从问题中复制了它然后回答，忘记优化 html/css/w3c 验证器等等。

【解决方案2】：

只要有足够的 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 规则987654322@ 和content 属性来显示内容。你也不能使用<input>。

创建一个光标将尽可能多地工作在框中的位置（1 + 最大长度）。可能会在其中添加另一个阶乘，除非您可以使 CSS 更聪明——虽然这不是一个好的权衡，但您现在已经使用程序生成了它。

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

甚至可能是<input type="tel">？

【讨论】：

感谢您提供良好的指导并提供清晰的信息；让我试试这个。