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

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

javascript jquery html css keyboard

Javascript 是否可以使用css3更新输入类型文本？,javascript,jquery,html,css,keyboard,Javascript,Jquery,Html,Css,Keyboard,我在下面提到了键盘布局示例：点击屏幕上的每个数字，我想在文本区域更新它。单击backspace，我想删除最后一个数字。单击“全部清除”，需要清除完整的文本区域。单击导航键光标应在文本区域前后移动。有没有办法只使用CSS3来实现这一点？[不使用Javascript？] 如果没有，你能建议实现同样目标的最佳方案吗？[注意：我没有在页面上使用任何javascript，因此添加类似jQuery的内容会增加页面加载时间的开销] <html><head> <s

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


.vkeyboardsplkey{
背景色：#DEDBE4；
边框：1px实心#666666；
显示：内联块；
颜色：#000000；
字体系列：arial；
字体大小：粗体；
填充：3px6px；
保证金：2倍；
光标：指针；
}
.vKeyboardSplKeysHover{
背景色：#8cb82b；
}.vKeyboardSplKeys:激活{
位置：相对位置；
顶部：1px；
}
.vKeyboardKeys{
宽度：9px；
背景色：#EEEEEE；
边框：1px实心#666666；
显示：内联块；
颜色：#000000；
字体系列：arial；
字体大小：粗体；
填充：3px8px；
保证金：2倍；
光标：指针；
}.vKeyboardKeysHover{
背景色：#CEE9FC；
}.vKeyboardKeys:激活{
位置：相对位置；
顶部：1px；
}
.空间{
填充：3px40px；
}
#虚拟键盘{
边框：1px实心#ddddd；
背景色：#F4；
填充物：5px；
文本对齐：居中；
} 
退格
789
456
123
0。-
&larr&rarr
全部清除

只要有足够的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，将显示框（必须位于标记中的小键盘之后）放置在小键盘上方，然后使用

#1:target~#input:：after

和

content

属性创建等量的CSS规则来显示内容。您也将无法使用

创建光标将使框中的位置尽可能多地工作（1+最大长度）。可能会抛出另一个阶乘，除非你能使CSS更聪明——虽然这不是一个很好的折衷办法，但你现在已经在使用一个程序生成它了

如果我之前不清楚的话，那么使用CSS来实现这一点是非常不合适的。您需要的是行为，而不是表示，因此属于JavaScript，而不是CSS

甚至可能是一个

，也许？

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


.vkeyboardsplkey{
背景色：#DEDBE4；
边框：1px实心#666666；
显示：内联块；
颜色：#000000；
字体系列：arial；
字体大小：粗体；
填充：3px6px；
保证金：2倍；
光标：指针；
}
.vKeyboardSplKeysHover{
背景色：#8cb82b；
}
.vKeyboardSplKeys:激活{
位置：相对位置；
顶部：1px；
}
.vKeyboardKeys{
宽度：9px；
背景色：#EEEEEE；
边框：1px实心#666666；
显示：内联块；
颜色：#000000；
字体系列：arial；
字体大小：粗体；
填充：3px8px；
保证金：2倍；
光标：指针；
}
.vKeyboardKeysHover{
背景色：#CEE9FC；
}
.vKeyboardKeys:激活{
位置：相对位置；
顶部：1px；
}
.空间{
填充：3px40px；
}
#虚拟键盘{
边框：1px实心#ddddd；
背景色：#F4；
填充物：5px；
文本对齐：居中；
}
函数getValue（val）
{
document.getElementById（'answer'）。value=val；
}
退格


7.
8.
9


4.
5.
6.


1.
2.
3.


0
.
-


&larr；
&rarr；


清除所有

感谢您提供了良好的指导和清晰的说明；让我试试这个。谢谢阿努巴夫。这非常有用。为什么不把边框样式放在css类中？@TheVillageIdiot border意味着边框属性？@Anubhav是的，我知道我指的是边框属性，但它们可以放在cass声明中，而不是放在每个元素中。@TheVillageIdiot绝对是我从问题中复制过来的，然后回答，忘了优化html/css/w3c验证器和所有。