Can input type text be styled using CSS3 for updates?

Displayed below is a sample keyboard layout: Each number on the screen can be clicked to update the text area. Clicking the backspace key will remove the last number entered. To clear all content in the text area, click on the clear all button. Use the navigation keys < > to move the cursor forwards and backwards within the text area. Is it possible to achieve this using only CSS3? [No JavaScript allowed] If not, what would be the recommended approach to accomplish this task without using JavaScript or jQuery? [Keep in mind that adding jQuery may affect page load time]

<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"... </span><span class="vKeyboardKeys" style="border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-l right-radius: 6px;">-</span><br><span class="vKeyboardSplKeys" data="left" style=...
javascriptjqueryhtmlcsskeyboard

Answer №1

Check out this simple JavaScript solution! In this example, you won't need to include any external JavaScript files:

Below is a basic JavaScript function called getValue() that performs a specific task. It's currently set up to work with the number 7, but you can customize it as needed...

<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;">
            press 7
        </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;">
          Move Left
        </span>
        <br>
      </div>

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

Answer №2

With enough mastery of HTML and CSS, you can achieve almost anything; however, implementing a grid system with 20 × n! elements may be more resource-intensive compared to using JavaScript.

If you're still determined to proceed, here's a possible approach:

<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>

You would need to use CSS to position the display box above the keypad in the markup and create multiple CSS rules like #1:target ~ #input::after with 'content' properties to show the content dynamically. It's important to note that an <input> tag cannot be used in this scenario.

Implementing a cursor feature would require a significant amount of work to accommodate all possible positions within the box (1 + maximum length). This could involve additional factorial calculations unless there are clever ways to optimize the CSS – but this might not be worth the effort, especially when automating this process using a program.

To emphasize, relying solely on CSS for such functionality is not recommended. The focus should be on behavior rather than presentation, making it more suitable for JavaScript implementation.

Have you considered using an <input type="tel"> instead?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the encoding for Javascript in UTF-8?

My current ajax call is able to successfully send the request and retrieve the expected response. However, I am facing difficulty in correctly displaying it in li items. $.ajax({ url: "{% url 'users:profile_page_tags_get' 'primary&apos ...

javascriptjqueryajaxunicodeutf-8

JavaScript - The onkeypress event continuously adds text to the end

In my Angular application, I have implemented an input field with the onkeypress event handler to automatically remove any commas entered by the user: <input name="option" ng-model="main.optionToAdd" onkeypress="this.value = this.value.replace(/,/g ...

javascriptangularjs

The SQL query containing 6 SELECT statements combined with UNION operation resulted in a total of 2 rows being

The table that I'm working with has rows containing four different fields of numbers: people, debris, miles, and bags. As of now, all these fields are set to 0 because there is no data inputted yet. These rows also include two key fields called ' ...

phpmysqlhtmlsqlunion

Removing an element from an object using ng-model when its value is empty is a standard practice

Utilizing the $resource service to access and modify resources on my API has been a challenge. An issue arises when the ng-model-bound object's value is set to empty - the bound element is removed from the object. This results in the missing element ...

javascriptangularjs

When adding multiple forms to a table, only the final form submission is successfully inserted

I have 2 forms on my website. The first form is static (general information). For the second form (project information), users can duplicate it using jQuery if they want to insert multiple projects. However, I am facing an issue where only the last project ...

phpjquerymysqlforms

Mobile device tab animation

I am facing a challenge with a tab containing four items that are vertically stacked on mobile devices. My goal is to animate the clicked li element to move to the bottom of the stack. After experimenting with CSS animations, I was able to achieve this eff ...

jquerycss

Incorporating JQuery UI sortable functionality with the CSS grid display property to create a

I'm currently working on creating a sortable CSS grid using jQuery UI. $( function() { $( "#sortable" ).sortable({ handle: "handle" }); }); gridHolder{ display:grid; background:tan; grid-template-columns: ...

jquerycssjquery-ui

Updating a component when a prop changes

Embarking on my journey into the world of React, I find myself in need of assistance. The issue at hand involves re-rendering data within my Table component. Whenever a new API call is made to create an entry in my database using Prisma, the newly added d ...

javascriptreactjsnext.jsreact-props

Customize the Width of DropDown List Items with Razor

I'm having trouble adjusting the width of items in a DropDownList. I want the width of the DropDown items to be different from the DropDown itself. Can anyone assist me with this? <div class="col-md-3"> @f.FormGroup().DropDownList("IdTipoAc ...

jquerycssasp.net-mvcrazor

securing data with javascript object encryption

let User = {}; User.username = e.row.username; User.email = e.row.email; User.password = e.row.password; Here is my user object, which I want to store in a file. But before saving it, I need to encrypt the data for security reasons. When reading the file, ...

javascript

Using Ramda to transform an array of key-value pairs into an object

Utilizing Ramda to organize a normalized model object by key involves converting it to key|value pairs (similar to Object.entries) and sorting by the first value using R.head (which represents the key when in pairs) The goal is to transform the resulting ...

javascriptramda.js

How can you apply filtering to a table using jQuery or AngularJS?

I am looking to implement a filtering system for my table. The table structure is as follows: name | date | agencyID test 2016-03-17 91282774 test 2016-03-18 27496321 My goal is to have a dropdown menu containing all the &apo ...

javascriptjqueryangularjs

Grails 3 - Resource Management Extension

Can anyone recommend a great Grails plugin for the latest version of Grails 3 (specifically working with 3.0.4)? I'm looking for something like this one () that allows me to create resource bundles for JS, CSS, and other dependencies. I think having ...

javascriptcssgrails-3.0grails-2.2

The function os.platform in React and Electron mistakenly identifies the browser as the operating system instead of the actual OS

In my quest to locate the appdata folder for the application, I encountered a challenge where each operating system has a different path for the appdata or application support folder. To address this, I attempted to identify the OS type in order to deter ...

javascriptnode.jsreactjselectronoperating-system

The form created using jQuery is not submitting correctly because the PHP $_FILES array is empty

Creating an HTML form dynamically in jQuery and submitting the form data via Ajax to 'add_sw.php' for processing is my current challenge. However, I have encountered an issue where the PHP script cannot access the PHP $_FILES variable as it turn ...

javascriptphpjqueryhtmlajax

Unable to obtain a response even after providing the correct API key in a Node.js POST request

Can you please assist me in troubleshooting the POST request code below? Here is a snippet of the code: const express = require("express"); const bodyParser = require("body-parser"); //const request = require("request"); const https = require("https"); c ...

javascriptnode.jsrestexpress

The dimension of HTML on an IOS web application

After successfully designing a web app that works well on desktop browsers and iPad Safari, I encountered an issue when trying to install it as a hybrid app using cordova 3.3.0. The problem arises with the height not displaying properly. Despite including ...

ioshtmlcsscordova

How to pass extra value in IE7 and IE8 when selecting an option from a 'select' form

When passing expiry parameters using a form 'select' option, everything seems to be working fine in most browsers except for IE7 and IE8. Upon inspecting the form snippet and the array received from the card processor logs, it was noticed that an ...

jqueryhtmlformsinternet-explorer

Creating a Custom Error Object in Feathersjs: A Step-by-Step Guide

If I were to throw a GeneralError when calling a service, how can I create an error object with the following structure: { "status": "Failed", "code": "500_1", "detail": "Something is wrong with your API" } I have attempted to add this in the error hook: ...

javascriptnode.jsfeathersjsfeathers-hookfeathers-service

Organize the Div elements in the form of a message

Here is the code I am working with: https://jsfiddle.net/bdqgszv5/1/ This is the same code without jsfiddle: <section id="aussteller" class="row separated"> <div class="section-header text-center"> <h2& ...

htmlcsstwitter-bootstrap