https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input
<input type="number" maxlength="3" size="12" placeholder="number" />
<input type="text" maxlength="3" size="12" placeholder="text" />maxlength="3", size="12" 对 type="number" 不生效！
Created
April 5, 2017 08:55
-
-
Save xgqfrms-GitHub/41ef1ad64a7467c3d520ecadaaeaa5c8 to your computer and use it in GitHub Desktop.
Input bugs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input type="number" bugs</title>
<!-- https://gist.github.com/xgqfrms-GitHub/41ef1ad64a7467c3d520ecadaaeaa5c8 -->
<style>
input[name="points"]{
min-width: 200px;
float: left;
clear:both;
}
input:invalid{
border: 1px solid red;
}
input:valid{
border: 1px solid green;
}
</style>
</head>
<body>
<div>
<!--input type="number" size="23" bugs-->
<form>
<input type="number" name="points" step="100" min="0" minlength="3" maxlength="3" placeholder="请输入0或100的倍数的增豆" />
<input type="number" name="points" size="36" step="100" min="0" minlength="3" maxlength="3" placeholder="请输入0或100的倍数的增豆" />
<input type="submit" name="points" value="submit" />
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input type="number" bugs</title>
<!-- https://gist.github.com/xgqfrms-GitHub/41ef1ad64a7467c3d520ecadaaeaa5c8 -->
<style>
input[name="points"]{
min-width: 200px;
float: left;
clear:both;
}
input:invalid{
border: 1px solid red;
}
input:valid{
border: 1px solid green;
}
</style>
</head>
<body>
<div>
<!--input type="number" size="23" bugs-->
<form>
<input type="number" name="points" step="100" min="0" max="2000"minlength="3" maxlength="3" placeholder="请输入0或100的倍数的增豆" />
<input type="number" name="points" size="36" step="100" min="0" max="2000"minlength="3" maxlength="3" placeholder="请输入0或100的倍数的增豆" />
<input type="submit" name="points" value="submit" />
</form>
</div>
</body>
</html>
input size
https://www.w3schools.com/tags/att_input_size.asp
size属性指定元素的可见宽度（以字符为单位）。
Note: The size attribute works with the following input types: text, search, tel, url, email, and password.
注意：size属性适用于以下输入类型：文本，搜索，电话，网址，电子邮件和密码。
not
适用于number
size
step
min
max
minlength
maxlength Tip: To specify the maximum number of characters allowed in the element, use the maxlength attribute.
提示：要指定元素中允许的最大字符数，请使用maxlength属性。
Text Input Size vs. Width
https://www.sitepoint.com/community/t/text-input-size-vs-width/5181/3
transform: scaleX(-1); & 左右翻转图片，镜像效果
https://gist.github.com/xgqfrms-GitHub/60379c11ef1f5a2d584b4960323f491c
js get <input type="number" value=""> & document.getElementById("myNumber").value;
function myFunction() {
var value = document.getElementById("myNumber").value;
alert(value);
setNumX9('myNumber');
}
const setNumX9 = (id) => {
let input_param = `#${id}`,
num = document.querySelector(input_param);
console.log(`%c num`, `color: red`, num);
console.log(`%c num.value`, `color: red`, num.value);
console.log(`%c textContent`, `color: red`, num.textContent);
console.log(`%c num.innerText`, `color: red`, num.innerText);
console.log(`%c num.innerHTML`, `color: red`, num.innerHTML);
let showValue = num.value + '\n' + num.textContent + '\n' + num.innerText + '\n' + num.innerHTML;
console.log(showValue);
alert(showValue);
}
const datas = document.querySelectorAll('[data-good="saleNumber"]');
datas[1].value;
datas[1].value.length;
typeof(datas[1].value);
datas[1].value.length > 5 ? datas[1].value = parseInt(99999) : datas[1].value = parseInt(datas[1].value);
HTML5 input & get input value
let input_value = document.querySelector(".ant-calendar-picker-input");
let key = input_value.getAttribute('value');
console.log(`input_value = ${key}`);
js-get-html5-input-value
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://www.w3.org/TR/html-media-capture/
https://html.spec.whatwg.org/multipage/forms.html#the-input-element
https://html.spec.whatwg.org/multipage/forms.html#attr-input-list
https://www.w3.org/TR/html5/forms.html#the-input-element