使用javascript構建文本框內容

我想知道是否有更好的方法來執行此練習。這裏是：創建一個包含文本框的表單;在用戶輸入文本後，只要他或她在表單中的其他位置單擊（提示：使用change onChange事件處理程序），所有字母都將轉換爲小寫字母。使用javascript構建文本框內容

我寫了這個代碼：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Event</title> 
</head> 
<body> 
<form> 
    Username : <input type="text" id="username"><br> 

<input type="submit" value="button"> 

</form> 
<script type="text/javascript"> 

var username = document.getElementById("username"); 

username.onchange = function(){ 
username.value = username.value.toLowerCase(); 
}; 


</script> 
</body> 
</html>

基本上我是格式化

來源

2015-03-13 kourouma_coder

替換文本框的內容可能是太容易了，但在樣式設置文本爲小寫轉換沒有按「T允許大寫:)

function toLower(element) { 
 
    if (element && element.value) { 
 
    element.value = element.value.toLowerCase(); 
 
    var target = document.getElementById('realvalue'); 
 
    target.innerHTML = element.value; 
 
    } 
 
}

<input type="text" onblur="toLower(this)" /> 
 

 
<div id="realvalue"></div>

來源

2015-03-13 15:04:44 Icepickle

不幸的是，無論是在輸入框仍是當用戶只使用'text-transform'時，用戶最初輸入的是同一個案例。你必須在接收端使用['strtolower（）']（http://php.net/strtolower）（如果你使用PHP）來保持小寫。 – Scott 2015-03-13 15:16:32

@ScottKaye你是對的，我添加了一個onblur來做到這一點（並添加了一個顯示功能來顯示它肯定：D） – Icepickle 2015-03-13 15:22:59

不錯！當然，如果我們超級挑剔，那*只有在用戶啓用Javascript的情況下才有效;） – Scott 2015-03-13 15:26:24

但是，如果所有的字母都將被轉換爲他或她點擊其他地方的形式，你的代碼正常工作，儘快小寫... http://jsfiddle.net/b6xwde62/

<form> 
    Username : <input type="text" id="username"><br> 

<input type="submit" value="button"> 

</form> 
<script type="text/javascript"> 
var username = document.getElementById("username"); 

username.onchange = function(){ 
username.value = username.value.toLowerCase(); 
}; 
</script>

來源

2015-03-13 15:18:35 kampageddon

我知道它的工作原理，我想要一個更聰明（或高效）的方式來做到這一點。 – 2015-03-13 16:11:32

使用javascript構建文本框內容

回答

相關問題