更改輸入大寫

JS：更改輸入大寫

<script type="text/css"> 
$(function() { 
    $('#upper').keyup(function() { 
     this.value = this.value.toUpperCase(); 
    }); 
}); 
</script>

HTML

<div id="search"> 
     <input type="radio" name="table" class="table" value="professor" tabindex="1" /> Professor 
     <input type="radio" name="table" class="table" value="department" tabindex="2" /> Department 
     <input type="radio" name="table" id="upper" class="table" value="course" tabindex="3" /> Course 
     <input type="text" name="search" class="keywords" value="Select an option..." onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?':this.value;" tabindex="4" /> 
     <div id="content"> </div> 
    </div>

這是爲什麼仍然沒有工作？只是試圖從JS調用div「.keywords」。

來源

2011-04-22 Jshee

我希望我有時間把我所相信的是這裏最好的答案。這是爲了處理按鍵事件，並在適用的情況下將鍵碼更改爲大寫字母，它比聽起來更容易使跨瀏覽器兼容，但我認爲這是最好的解決方案。 – 2011-04-22 16:17:02

其實我想的解決方案只適用於IE ... e.which是隻讀的FF和WebKit，但IE可以讓你改變e.keyCode。在IE中試試這個http://jsfiddle.net/48fSq/1/ – 2011-04-22 21:57:12

205

我覺得最優雅的方式是沒有任何JavaScript，但用CSS。您可以使用text-transform: uppercase（這是內嵌只是想法）：

<input id="yourid" style="text-transform: uppercase" type="text" />

編輯：

所以，你的情況，如果你想要的關鍵字是大寫的變化： keywords: $(".keywords").val(),到$(".keywords").val().toUpperCase(),

來源

2011-04-22 15:44:33 Tim

@Tim - 您不允許輸入INPUT的結束標籤：http://www.w3.org/TR/html401/interact/forms.html#edef-INPUT – 2011-04-22 15:47:01

@jared true，編輯答案。 – Tim 2011-04-22 15:47:57

用戶輸入的內容是否真的是大寫字母，還是僅僅用於顯示？ – BiAiB 2011-04-22 15:48:01

嘗試：

$('#search input.keywords').bind('change', function(){ 
    //this.value.toUpperCase(); 
    //EDIT: As Mike Samuel suggested, this will be more appropriate for the job 
    this.value = this.value.toLocaleUpperCase(); 
});

來源

2011-04-22 15:44:17 BiAiB

你需要把結果賦給某個地方，而這不會起作用，因爲只有當控件失去焦點時纔會觸發'change'。 – 2011-04-22 15:47:23

對於用戶輸入，'.toLocaleUpperCase'可能更合適。 https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/toLocaleUpperCase – 2011-04-22 15:47:58

@Mike Samuel你是真的，我不知道這種方法。希望它是跨瀏覽器，因爲我在Msdn上看到它，我會更新我的答案 – BiAiB 2011-04-22 15:50:13

Javascript字符串對象有一個toLocaleUpperCase()函數，它使轉換本身變得簡單。

活資本Here's an example：

$(function() { 
    $('input').keyup(function() { 
     this.value = this.value.toLocaleUpperCase(); 
    }); 
});

不幸的是，這完全復位的文本框的內容，因此用戶的插入位置（如果不是「文本框的終結」）丟失。

您可以hack this back in，不過，一些瀏覽器的切換法寶：

// Thanks http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea/ 
function getCaretPosition(ctrl) { 
    var CaretPos = 0; // IE Support 
    if (document.selection) { 
     ctrl.focus(); 
     var Sel = document.selection.createRange(); 
     Sel.moveStart('character', -ctrl.value.length); 
     CaretPos = Sel.text.length; 
    } 
    // Firefox support 
    else if (ctrl.selectionStart || ctrl.selectionStart == '0') { 
     CaretPos = ctrl.selectionStart; 
    } 

    return CaretPos; 
} 

function setCaretPosition(ctrl, pos) { 
    if (ctrl.setSelectionRange) { 
     ctrl.focus(); 
     ctrl.setSelectionRange(pos,pos); 
    } 
    else if (ctrl.createTextRange) { 
     var range = ctrl.createTextRange(); 
     range.collapse(true); 
     range.moveEnd('character', pos); 
     range.moveStart('character', pos); 
     range.select(); 
    } 
} 


// The real work 

$(function() { 
    $('input').keyup(function() { 
     // Remember original caret position 
     var caretPosition = getCaretPosition(this); 

     // Uppercase-ize contents 
     this.value = this.value.toLocaleUpperCase(); 

     // Reset caret position 
     // (we ignore selection length, as typing deselects anyway) 
     setCaretPosition(this, caretPosition); 
    }); 
});

最終，這可能是最簡單的假貨。設置樣式text-transform: uppercase的文本框，使其出現大寫給用戶，然後在你的JavaScript應用文本轉換一次，每當用戶插入符焦點離開文本框完全：

HTML：

<input type="text" name="keywords" class="uppercase" />

CSS：

input.uppercase { text-transform: uppercase; }

的Javascript：

$(function() { 
    $('input').focusout(function() { 
     // Uppercase-ize contents 
     this.value = this.value.toLocaleUpperCase(); 
    }); 
});

希望這會有所幫助。

來源

2011-04-22 15:46:31

+1沒有想到選擇問題的丟失（並且光標丟失）。當它發生時它很煩人。這是我的最佳答案 – BiAiB 2011-04-22 16:00:01

@Tomalak - 在第一個例子中，爲什麼不使用focusout？ – 2011-04-22 16:00:24

@Jared：我已經假設OP希望文本框內容自動被大寫_用戶類型_。我當然會。 – 2011-04-22 16:02:12

JavaScript有一個toUpperCase()方法。 http://www.w3schools.com/jsref/jsref_toUpperCase.asp

因此，無論你認爲最好把它放在你的代碼，你將不得不做一些像

$(".keywords").val().toUpperCase()

來源

2011-04-22 15:48:23

我該如何做這個課程電話？ – Jshee 2011-04-22 15:51:08

有很多方法可以做到這一點。最簡單最容易的就是把它放在「課程」的情況下。 – 2011-04-22 16:14:47

我該怎麼做：\t case'course'： \t phppage ='course'; \t ext ='.php？cID ='; \t break; – Jshee 2011-04-22 16:26:26

**JAVA SCRIPT** 
<html> 
<body> 
<script> 
function @ToCaps(obj) 
{ 
obj.value=obj.value.toUpperCase(); 
} 
</script> 
<input type="text" [email protected](this)"/> 
</body> 
</html> 

**ASP.NET** 
Use a css style on the text box, write css like this:

。ToCaps {text-transform：大寫; }

<asp:TextBox ID="TextBox1" runat="server" CssClass="ToCaps"></asp:Te writxtBox> 

**OR** 
simply write this code in textbox 
<asp:TextBox ID="TextBox1" runat="server" style="text-transform:uppercase"></asp:TextBox> 


**1.Note you don't get intelligence until you type up to style="**

來源

2013-07-09 05:12:36

它永遠不會像'script type =「text/css」>這樣工作' – swapnesh 2013-07-09 05:17:17

也可以這樣做，但其他方式似乎更好，如果你只需要它一次，這將派上用場。

onkeyup="this.value = this.value.toUpperCase();"

來源

2013-11-15 10:29:02 Crouch

如果你的目的是爲HTML輸入，你可以很容易地做到這一點，而不使用JavaScript。這將是標準，非常容易使用現代CSS標籤：

<input type="text" style="text-transform: uppercase" >

，或者您可以使用命名爲「文本的大寫字母」

<input type="text" class="text-uppercase" >

來源

2015-04-06 20:24:09 Ebrahim

我無法找到一個文本的引導類Bootstrap中的大寫字母在其中一個答案中提到。無論如何，我創造了它;

.text-uppercase { 
    text-transform: uppercase; 
}

這會以大寫顯示文本，但底層數據不會以這種方式轉換。所以在jQuery中我有;

$(".text-uppercase").keyup(function() { 
    this.value = this.value.toLocaleUpperCase(); 
});

這將改變底層數據，無論你使用文本大寫的類。

來源

2016-01-29 12:12:11 arame3333

onBlur="javascript:{this.value = this.value.toUpperCase(); }

會輕易改變大寫字母。

Demo Here

來源

2017-06-24 13:02:28 Venkat

解決方案使用value.toUpperCase似乎有鍵入文本字段重置光標位置到文本末尾的問題。使用文本轉換的解決方案似乎存在提交給服務器的文本仍然可能小寫的問題。該解決方案避免了這些問題：

function handleInput(e) { 
 
    var ss = e.target.selectionStart; 
 
    var se = e.target.selectionEnd; 
 
    e.target.value = e.target.value.toUpperCase(); 
 
    e.target.selectionStart = ss; 
 
    e.target.selectionEnd = se; 
 
}

<input type="text" id="txtTest" oninput="handleInput(event)" />

來源

2017-07-12 20:45:00 BlueMonkMN

更改輸入大寫

回答

相關問題