テキストボックスの最初の文字を大文字にしたいのですが、どのように適用できるかわかりません。例 シトリメラ ----> シトリメラ
これをテキストボックスに適用したい。
ご協力いただきありがとうございます。
テキストボックスの最初の文字を大文字にしたいのですが、どのように適用できるかわかりません。例 シトリメラ ----> シトリメラ
これをテキストボックスに適用したい。
ご協力いただきありがとうございます。
これを試してください。できます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Capitalizing first letter in a textbox</title>
<script type="text/javascript">
function capitalize(textboxid, str) {
// string with alteast one character
if (str && str.length >= 1)
{
var firstChar = str.charAt(0);
var remainingStr = str.slice(1);
str = firstChar.toUpperCase() + remainingStr;
}
document.getElementById(textboxid).value = str;
}
</script>
<body>
<form name="myform" method="post">
<input type="text" id="mytextbox" onkeyup="javascript:capitalize(this.id, this.value);">
</form>
</body>
</html>
input[type=text] {
text-transform: capitalize;
}
これにより、テキストがこのように表示されます。
JavaScriptでこれを行うには、ノードを取得し、その値を変換に置き換えます
var textbox = document.getElementById('myTextboxId');
textbox.value = textbox.value.charAt(0).toUpperCase() + textbox.value.slice(1);
MDN ページ
http://jsfiddle.net/billymoon/mzXLc/1/
<input type="text" id="targetBox">
var capitalize = function(e){
// if the first letter is lowercase a-z
// ** don't run the replace unless required, to permit selecting of text **
if(this.value.match(/^[a-z]/)){
// replace the first letter
this.value = this.value.replace(/^./,function(letter){
// with the uppercase version
return letter.toUpperCase();
});
}
}
// listen to key up in case of typeing, or pasting via keyboard
// listen to mouseup in case of pasting via mouse
// prefer `up` events as the action is complete at that point
document.getElementById('targetBox').addEventListener('keyup', capitalize);
document.getElementById('targetBox').addEventListener('mouseup', capitalize);