Question

我想向包含以下数据的输入字段中添加文本（计算器格式）：

一个数字
符号（x，-，+，/）
一个数字

如何在一个输入字段中的这些元素之间添加填充，所以我可以拥有：

<html>
<head>
<title></title>
</head>
<body>
<form name="save" id="save" action="register.jsp" method="post" />
Full name : <input type="fullname" name="fullname" id="fullname" />
Email : <input type="email" name="email" id="email" />
Telephone : <input type="telephone" name="telephone" id="telephone" />
<input type="submit" name="submit" value="Submit" />
</form>
</body>
</html>

数字之间的间隙也可以自定义。

在输入中添加简单的填充内容并没有帮助...（https://jsfiddle.net/gzuv6Lr4/显示出来）

有任何线索吗？

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@page import="java.sql.*,java.util.*, javax.persistence.id"%>

<%
String fullname = request.getParameter("fullname");
String email = request.getParameter("email");
String telephone = request.getParameter("telephone");

try
{
Class.forName("com.mysql.jdbc.Driver");
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "");
Statement st=conn.createStatement();

int i=st.executeUpdate("insert into users(fullname,email,telephone)values('"+fullname+"','"+email+"','"+telephone+"')");
out.println("Data is successfully inserted!");
}
catch(Exception e)
{
System.out.print(e);
e.printStackTrace();
}
%>

[digit][30px gap][sign][10px gap][2nd digit]

Answer 1

在输入字段上使用CSS word-spacing属性：

https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing

Answer 2

寻找此解决方案：

<amp-state id="selected">
  <script type="application/json">[]</script>
</amp-state>

<amp-selector layout="container" multiple on="select:AMP.setState({selected: event.selectedOptions})">
  <div option="1">First</div>
  <div option="2">Second</div>
  <div option="3">Third</div>
</amp-selector>

<div hidden [hidden]="selected.length < 3">You can only select two options.</div>
<a href="/?ids=" [href]="'/?ids=' + selected.slice(0, 2)">Click me</a>

var signsMap = new Map();
signsMap.set(16, "X");
signsMap.set(88, "x");
signsMap.set(107, "+");
signsMap.set(109, "-");
signsMap.set(111, "/");

var expression = document.getElementById("expression");
var numberSequence = false;

expression.addEventListener("keyup", function(e) {
  console.log(!isNaN(e.key));
  if (signsMap.get(e.keyCode)) {
    findSign(signsMap.get(e.keyCode));
    numberSequence = false;
  } else if (!isNaN(e.key) && !numberSequence) {
    var expValue = expression.value;
    var head = expValue.substring(0, expression.selectionStart - 1);
    var body = expValue.substring(expression.selectionStart - 1, expression.selectionStart);
    var tail = expValue.substring(expression.selectionStart, expValue.length);
    expression.value = head + " " + body + tail;
    numberSequence = true;
  } else {
    e.preventDefault();
  }
}, false);

function findSign(sign) {
  var expValue = expression.value;
  if (sign) {
    if (expValue.indexOf(sign, expression.selectionStart - 1) > -1) {
      var head = expValue.substring(0, expression.selectionStart - 1);
      var body = expValue.substring(expression.selectionStart - 1, expression.selectionStart);
      var tail = expValue.substring(expression.selectionStart, expValue.length);
      expression.value = head + "   " + body + tail;
    }
  } else {
    for (const sign of signsMap.values()) {
      if (expValue.indexOf(sign) > -1) {
        expression.value = expValue.replace(sign, "   " + sign);
        break;
      }
    }
  }
}

window.onload = findSign(false);

._inp {
  color: red;
  word-spacing: 10px;
}

在输入文本之间添加填充

2 个答案: