입력을 대문자로 변경

입력을 대문자로 변경

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를 "키워드"라고 부르려고 할 뿐입니다.

가장 우아한 방법은 자바스크립트가 없지만 cs를 사용하는 것이라고 생각합니다.사용할 수 있습니다(이것은 단지 아이디어를 위해 줄을 선 것입니다).

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

편집:

키워드를 대문자로 변경하려면 다음과 같이 하십시오.keywords: $(".keywords").val(),로.$(".keywords").val().toUpperCase(),

자바스크립트 문자열 객체는toLocaleUpperCase()변환 자체를 쉽게 해주는 기능.

다음은 실시간 자본화의 예입니다.

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

---

안타깝게도 이렇게 하면 텍스트 상자 내용이 완전히 재설정되므로 사용자의 캐럿 위치("텍스트 상자 끝"이 아닌 경우)가 손실됩니다.

그러나 브라우저 전환 마법을 사용하면 이를 다시 해킹할 수 있습니다.

// 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사용자에게 대문자로 표시되도록 텍스트 상자에 입력한 다음, 자바스크립트에서 사용자의 캐럿 포커스가 텍스트 상자에서 완전히 벗어날 때마다 텍스트 변환을 한 번 적용합니다.

HTML:

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

CSS:

input.uppercase { text-transform: uppercase; }

자바스크립트:

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

도움이 되길 바랍니다.

html 입력을 목적으로 한다면 자바스크립트!나 다른 JS 라이브러리를 사용하지 않고도 쉽게 할 수 있습니다.CSS 태그 텍스트 변환을 사용하는 것은 표준적이고 매우 쉽습니다.

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

또는 "text-synchase"로 명명된 부트스트랩 클래스를 사용할 수 있습니다.

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

이렇게 하면 코드가 훨씬 간단해집니다!

값.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)" />

이 방법으로도 할 수 있지만 다른 방법이 더 나은 것 같습니다. 한 번만 필요하면 유용합니다.

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

시도:

$('#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();
} );

가장 쉬운 방법은 부트스트랩의 클래스 ".text-uppercase"를 사용하는 것이라고 생각합니다.

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

부트스트랩에서 답 중 하나에서 언급된 텍스트 상위 케이스를 찾을 수 없었습니다.내가 만들어낸 거라 해도 말입니다.

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

이렇게 하면 텍스트가 대문자로 표시되지만 기본 데이터는 이 방식으로 변환되지 않습니다.그래서 제가 가진 질문은..

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

이렇게 하면 텍스트 대문자 클래스를 사용하는 모든 곳에서 기본 데이터가 변경됩니다.

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

대문자가 쉽게 바뀝니다.

데모 여기

이 답변에는 문제가 있습니다.

style="text-transform: uppercase"

그것은 또한 자리지킴이 단어를 불편한 대문자로 바꿉니다.

placeholder="first name"

입력을 렌더링할 때 "first name" 자리 표시자를 대문자로 씁니다.

FIRST NAME

그래서 더 좋은 글을 썼습니다.

onkeypress="this.value = this.value + event.key.toUpperCase(); return false;"

잘 작동합니다! 하지만 자바스크립트 코드가 복잡하면 약간의 부작용이 있습니다.

누군가에게 더 나은 해결책을 개발할 수 있는 아이디어를 제공하는 데 도움이 되기를 바랍니다.

여기서는 사용자가 키를 해제할 때 트리거되는 키업 이벤트를 입력 필드에 사용합니다.그리고 여기서는 대문자() 함수로 값을 변경합니다.

text-transform="Uppercase"는 텍스트 스타일만 변경할 뿐 값은 변경하지 않습니다.따라서 값을 변경하기 위해서는 값을 변경할 뿐만 아니라 표시할 인라인 코드를 사용합니다.

<input id="test-input" type="" name="" onkeyup="this.value = this.value.toUpperCase();">

다음은 값이 변경되었음을 증명한 코드 조각입니다.

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<form method="get" action="">
		<input id="test-input" type="" name="" onkeyup="this.value = this.value.toUpperCase();">
		<input type="button" name="" value="Submit" onclick="checking()">
	</form>
	<script type="text/javascript">
		function checking(argument) {
			// body...
			var x = document.getElementById("test-input").value
			alert(x);
		}
		
		
	</script>
</body>
</html>

<input id="name" data-upper type="text"/>
<input id="middle" data-upper type="text"/>
<input id="sur" data-upper type="text"/>

속성 상위를 가진 동적으로 작성된 요소의 텍스트 상위 및 키업 작업이 발생할 때

$(document.body).on('keyup', '[data-upper]', function toUpper() {
  this.value = this.value.toUpperCase();
});

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

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

.대상 {문자 변환: 대문자; }

<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="**  

에는 는이 .toUpperCase()방법.http://www.w3schools.com/jsref/jsref_toUpperCase.asp

그래서 코드에 입력하는 것이 최선이라고 생각하는 곳이라면, 당신은 다음과 같은 것을 해야 할 것입니다.

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

당신은 이 HTML을 사용해 볼 수 있습니다.

<input id="pan" onkeyup="inUpper()" />

자바스크립트

function _( x ) {
  return document.getElementById( x );
}
  // convert text in upper case
  function inUpper() {
    _('pan').value = _('pan').value.toUpperCase();
  }

언급URL : https://stackoverflow.com/questions/5757101/change-input-to-upper-case