Javascript 强制表单文本为小写
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14106971/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Forcing form text to be lower-case
提问by John
How could I force the text in the "username" text inputto be lower-case regardless of what user types?
input无论用户类型如何，如何强制“用户名”文本中的文本为小写？
<div class="register">
<label for="username">Select username:</label>
</div>
<div class="registerform">
<input name="username" class="registerfont" type="text"
id="username" maxlength="15" style="height:35px; width:300px">
</div>
回答by fdiv_bug
in CSS:
在 CSS 中：
form input[type="text"] {
text-transform: lowercase;
}
otherwise in JS:
否则在 JS 中：
var text="this is my text.";
var lowercase=text.toLowerCase();
回答by jchapa
You have to use javascript. I have an example here: http://jsfiddle.net/xCfdS/3/
你必须使用javascript。我在这里有一个例子：http: //jsfiddle.net/xCfdS/3/
HTML:
<input type="text" id="txt" onkeyup="return forceLower(this);"/>?
HTML：
<input type="text" id="txt" onkeyup="return forceLower(this);"/>?
Javascript:
Javascript：
function forceLower(strInput)
{
strInput.value=strInput.value.toLowerCase();
}?
回答by Miguel Carvajal
回答by Ali Sheikhpour
Using jquery assuming that the input ID is username
使用 jquery 假设输入 ID 是用户名
$(document).ready(function(){
$("#username").on('change keyup paste',function(){
$(this).val($(this).val().toLowerCase());
})
})
回答by nguyenlamzx
This is my suggestion, it's based on the answer from @fdiv-bug & @ali-sheikhpour:
这是我的建议，它基于@fdiv-bug 和@ali-sheikhpour 的回答：
- Add text-transform: lowercase;for this field.
- 添加文本转换：小写；对于这个领域。
input[type="email"] {
text-transform: lowercase;
}
- catch "change" event on this field and transform value to lowercase by (String)toLowerCase function.
- 在此字段上捕获“更改”事件，并通过 (String)toLowerCase 函数将值转换为小写。
var upperCaseMatch = /[A-Z]/;
var events = {
CHANGE: 'change'
};
$(function() {
$(document).on('change', 'input[type="email"]', function() {
var value = $(this).val();
if (!upperCaseMatch.test(value)) {
return;
}
$(this).val(value.toLowerCase());
});
});
Hope its useful for you.
希望它对你有用。
回答by JJJ
@fdiv_bug's answer is good except for the issues mentioned in the comments of their answer. Using the input event instead of the keyup event fixed those issues for me.
@fdiv_bug 的回答很好，除了他们的回答评论中提到的问题。使用 input 事件而不是 keyup 事件为我解决了这些问题。
HTML:
HTML：
<input oninput="this.value=this.value.toLowerCase()"/>?
Javascript:
Javascript：
element.addEventListener('input',function(){this.value=this.value.toLowerCase()});?
回答by D.JCode
I use this simple code :
我使用这个简单的代码：
<input type="text" onkeyup="this.value = this.value.toUpperCase();">
回答by moto
Combining a bit of everyone's answer to here simplify things.
结合每个人的一些答案在这里简化事情。
Use CSS to avoid any flashing and for display purposes.
input[type="username"] { text-transform: lowercase; }
使用 CSS 来避免任何闪烁并用于显示目的。
input[type="username"] { text-transform: lowercase; }
Now, because this ONLY effects DISPLAY of the text in the browser, we need to also change the value of the input.
现在，因为这只会影响浏览器中文本的显示，我们还需要更改输入的值。
Add an event listener to the input.
const usernameInput = document.querySelector('input[type="username"]'); usernameInput.addEventListener("input", function(e){ e.target.value = e.target.value.toLowerCase(); });
向输入添加事件侦听器。
const usernameInput = document.querySelector('input[type="username"]'); usernameInput.addEventListener("input", function(e){ e.target.value = e.target.value.toLowerCase(); });
We can send this to the sever like normal and, like others have mentioned, check server-side to make sure a malicious user didn't send us UpPPercaSe input.
我们可以像往常一样将其发送到服务器，并且像其他人提到的那样，检查服务器端以确保恶意用户没有向我们发送 UpPPercaSe 输入。
回答by Clemens Tolboom
Use onchangeinstead
使用的onchange代替
<input name="username"
onchange="this.value = this.value.toUpperCase();"
style="text-transform: lowercase; height:35px; width:300px"
class="registerfont"
type="text"
id="username"
maxlength="15"
>
回答by SwiftNinjaPro
setInterval()will run if the user pastes something in
setInterval()如果用户粘贴某些内容将运行
setInterval(function(){
let myinput = document.getElementById('myinput');
//make lowercase
myinput.value = myinput.value.toString().toLowerCase();
//remove spaces (if you want)
myinput.value = myinput.value.toString().replace(' ', '');
//force specific characters
myinput.value = myinput.value.toString().replace(/[^a-z0-9\/\-_]/, '');
}, 10);
because this is a loop function using .replace(), replacing only first occurrence at a time, but still looping all of them, this appears to animate removing spaces on pasted text.
因为这是一个使用 的循环函数.replace()，一次只替换第一次出现，但仍然循环所有这些，这似乎是动画删除粘贴文本上的空格。
