是否可以更改已在按键上输入的字符,而无需手动操作?
例如,如果我想根据某些条件强制使用大写字母,那么最好执行以下操作:
function onKeypressHandler(e)
{
if ( condition )
{
e.which -= 32;
}
}
但当然这不起作用。
注意:这是不一个全面的大写字母,但仅特定字符。
也许我想说if ( e.which >= 97 && e.which <= 102 )
或if ( Wind.Direction == 'South' )
或其他什么 - 条件本身并不重要,但大写只能适用于当前字符而不是整个输入
我可以通过手动附加更改的字符来实现,但这是一种丑陋而混乱的方式,并且可能比它更慢。
function onKeypressHandler(e)
{
if ( condition )
{
$j(this).val( $j(this).val() + String.fromCharCode( e.which - 32 ) );
return false;
}
}
使用此方法的一个特定缺陷 - 如果选择所有输入文本并输入密钥,如果它落入此中,则它不会删除现有内容,而只是附加到用户想要删除的内容。 (需要调查检测任何选定的文本来解决这个问题,这使得这个文本更加丑陋。)
任何人都可以提供更好的解决方案吗?
答案 0 :(得分:18)
以下将完成这项工作。它基于an answer I wrote to another question。自定义transformTypedChar
功能以满足您的需求;我的例子只用字母a-g。
如果你需要在textarea而不是<input type="text">
上使用它,那么请注意IE&lt; = 8中存在以下代码为了简洁而无法处理的换行符。您可以在此处找到用于在textarea中获取选择的跨浏览器功能:Is there an Internet Explorer approved substitute for selectionStart and selectionEnd?
function transformTypedChar(charStr) {
return /[a-g]/.test(charStr) ? charStr.toUpperCase() : charStr;
}
document.getElementById("your_input_id").onkeypress = function(evt) {
var val = this.value;
evt = evt || window.event;
// Ensure we only handle printable keys, excluding enter and space
var charCode = typeof evt.which == "number" ? evt.which : evt.keyCode;
if (charCode && charCode > 32) {
var keyChar = String.fromCharCode(charCode);
// Transform typed character
var mappedChar = transformTypedChar(keyChar);
var start, end;
if (typeof this.selectionStart == "number" && typeof this.selectionEnd == "number") {
// Non-IE browsers and IE 9
start = this.selectionStart;
end = this.selectionEnd;
this.value = val.slice(0, start) + mappedChar + val.slice(end);
// Move the caret
this.selectionStart = this.selectionEnd = start + 1;
} else if (document.selection && document.selection.createRange) {
// For IE up to version 8
var selectionRange = document.selection.createRange();
var textInputRange = this.createTextRange();
var precedingRange = this.createTextRange();
var bookmark = selectionRange.getBookmark();
textInputRange.moveToBookmark(bookmark);
precedingRange.setEndPoint("EndToStart", textInputRange);
start = precedingRange.text.length;
end = start + selectionRange.text.length;
this.value = val.slice(0, start) + mappedChar + val.slice(end);
start++;
// Move the caret
textInputRange = this.createTextRange();
textInputRange.collapse(true);
textInputRange.move("character", start - (this.value.slice(0, start).split("\r\n").length - 1));
textInputRange.select();
}
return false;
}
};
答案 1 :(得分:1)
如何防止默认操作然后触发按键?像,
function onKeypressHandler(e)
{
if ( condition )
{
e.preventDefault();
// create new event object (you may clone current e)
var ne = new jQuery.Event("keypress");
ne.which = e.which - 32;
$(e.target).trigger(ne); // you may have to invoke with setTimeout
}
}
答案 2 :(得分:1)
你必须看到这一点......在我开始工作之后,我对自己非常满意..
你显然希望包含足够的标准,以避免在这里进入循环。
当条件计算结果为true时,下面的代码返回false,但它使用不会返回false的不同charCode触发相同的事件。
document.getElementById("input1").onkeypress = Handler;
function Handler(e)
{
e = e || window.event;
if ( e.charCode == 97 )
{
var evt = document.createEvent("KeyboardEvent");
evt.initKeyEvent("keypress",true, true, window, false, false,false, false, 0, e.charCode -32);
this.dispatchEvent(evt);
return false;
}
return true;
}
你可以在IE中使用fireEvent ... 我用了 http://help.dottoro.com/ljrinokx.php 和 https://developer.mozilla.org/en/DOM/event.initKeyEvent以供参考
答案 3 :(得分:0)
不确定你想要什么,但这会有效吗?
$('#my_element').keyup(function(){ $(this).val().toUpperCase(); });
或使用子字符串来获取最后一个字符并对其进行toUpperCase()
?
(psst ...你也可以使用keydown或keypress。)
答案 4 :(得分:-1)
你能用css吗?
<input type="text" style="text-transform: uppercase;" />
答案 5 :(得分:-1)
彼得,
你可能会在这里找到一些灵感:
http://www.maconstateit.net/tutorials/JSDHTML/JSDHTML15/jsdhtml15-05.htm
基本上可以通过各种方式查看“区域”周围的按键事件和功能。