jQuery에서 사용자가 해당 필드를 편집하는 동안 텍스트 필드의 첫 글자를 대문자로 쓰는 방법은 무엇입니까?
텍스트 필드에 입력되는 문자열의 첫 글자를 대문자로 쓰는 방법의 예를 찾고 있습니다. regex,수,으로, ,OnBlur,OnChange, 등. 사용자가 타이핑하는 동안 첫 글자를 대문자로 쓰고 싶습니다.
예를 들어, 제가 "cat"이라는 단어를 입력할 때 사용자는 'c'를 누르고, 그가 'a'를 누를 때까지 C는 필드에서 대문자로 표시되어야 합니다.
은 할 것 .keyup아니면keypress어디서부터 시작해야 할지 모르겠어요
예를 들어줄 사람?
CSS만 사용하면 됩니다.
.myclass
{
text-transform:capitalize;
}
이렇게 하면 첫 번째 문자가 간단히 변환됩니다.
yourtext.substr(0,1).toUpperCase()+yourtext.substr(1);
다른 곳에서 대답했습니다.그러나 키업 이벤트 시 호출할 수 있는 두 가지 기능이 있습니다.
첫 단어를 대문자로 쓰는 방법
function ucfirst(str,force){
str=force ? str.toLowerCase() : str;
return str.replace(/(\b)([a-zA-Z])/,
function(firstLetter){
return firstLetter.toUpperCase();
});
}
그리고 모든 단어를 대문자로 쓰는 것.
function ucwords(str,force){
str=force ? str.toLowerCase() : str;
return str.replace(/(\b)([a-zA-Z])/g,
function(firstLetter){
return firstLetter.toUpperCase();
});
}
@다렐 제안대로
$('input[type="text"]').keyup(function(evt){
// force: true to lower case all letter except first
var cp_value= ucfirst($(this).val(),true) ;
// to capitalize all words
//var cp_value= ucwords($(this).val(),true) ;
$(this).val(cp_value );
});
이것이 도움이 되기를 바랍니다.
건배 :)
$('input[type="text"]').keyup(function(evt){
var txt = $(this).val();
// Regex taken from php.js (http://phpjs.org/functions/ucwords:569)
$(this).val(txt.replace(/^(.)|\s(.)/g, function($1){ return $1.toUpperCase( ); }));
});
입력 내용을 백엔드로 사용하려면 "text-transform: capitalize;"를 사용하는 CSS 솔루션은 좋지 않습니다.데이터는 그대로 받을 수 있습니다.자바스크립트가 이 문제를 해결해 줍니다.
JQuery 플러그인은 앞서 언급한 몇 가지 기법을 결합한 것으로, 하이픈 뒤에 단어를 대문자로 쓰는 것이 특징입니다: "Tro Lo-Lo:
스크립트에 추가:
jQuery.fn.capitalize = function() {
$(this[0]).keyup(function(event) {
var box = event.target;
var txt = $(this).val();
var stringStart = box.selectionStart;
var stringEnd = box.selectionEnd;
$(this).val(txt.replace(/^(.)|(\s|\-)(.)/g, function($word) {
return $word.toUpperCase();
}));
box.setSelectionRange(stringStart , stringEnd);
});
return this;
}
그런 다음 아무 셀렉터나 대문자()를 붙이면 됩니다.
$('#myform input').capitalize();
@Spajus의 코드를 사용하고 좀 더 확장된 jQuery 플러그인을 작성했습니다.
저는 다음과 같은 네 가지 jQuery 함수를 작성했습니다.
upperFirstAll()upperFirst()만 대문자로upperCase()lowerCase()
다른 jQuery 기능처럼 사용하고 체인으로 연결할 수 있습니다.
$('#firstname').upperFirstAll()
완전한 jQuery 플러그인:
(function ($) {
$.fn.extend({
// With every keystroke capitalize first letter of ALL words in the text
upperFirstAll: function() {
$(this).keyup(function(event) {
var box = event.target;
var txt = $(this).val();
var start = box.selectionStart;
var end = box.selectionEnd;
$(this).val(txt.toLowerCase().replace(/^(.)|(\s|\-)(.)/g,
function(c) {
return c.toUpperCase();
}));
box.setSelectionRange(start, end);
});
return this;
},
// With every keystroke capitalize first letter of the FIRST word in the text
upperFirst: function() {
$(this).keyup(function(event) {
var box = event.target;
var txt = $(this).val();
var start = box.selectionStart;
var end = box.selectionEnd;
$(this).val(txt.toLowerCase().replace(/^(.)/g,
function(c) {
return c.toUpperCase();
}));
box.setSelectionRange(start, end);
});
return this;
},
// Converts with every keystroke the hole text to lowercase
lowerCase: function() {
$(this).keyup(function(event) {
var box = event.target;
var txt = $(this).val();
var start = box.selectionStart;
var end = box.selectionEnd;
$(this).val(txt.toLowerCase());
box.setSelectionRange(start, end);
});
return this;
},
// Converts with every keystroke the hole text to uppercase
upperCase: function() {
$(this).keyup(function(event) {
var box = event.target;
var txt = $(this).val();
var start = box.selectionStart;
var end = box.selectionEnd;
$(this).val(txt.toUpperCase());
box.setSelectionRange(start, end);
});
return this;
}
});
}(jQuery));
Groetjes :)
jQuery를 사용할 때 개인적으로 좋아하는 것은 짧고 달콤합니다.
function capitalize(word) {
return $.camelCase("-" + word);
}
이것을 하는 jQuery 플러그인도 있습니다.전 그걸... jCap.js라고 부를게요
$.fn.extend($, {
capitalize: function() {
return $.camelCase("-"+arguments[0]);
}
});
$("#test").keyup(
function () {
this.value = this.value.substr(0, 1).toUpperCase() + this.value.substr(1).toLowerCase();
}
);
첫 글자를 대문자로 쓰기 전에 문자열을 낮추도록 위의 코드를 약간 업데이트합니다.
(둘 다 Jquery 구문 사용)
function CapitaliseFirstLetter(elemId) {
var txt = $("#" + elemId).val().toLowerCase();
$("#" + elemId).val(txt.replace(/^(.)|\s(.)/g, function($1) {
return $1.toUpperCase(); }));
}
또한 전체 문자열을 대문자로 만드는 함수:
function CapitaliseAllText(elemId) {
var txt = $("#" + elemId).val();
$("#" + elemId).val(txt.toUpperCase());
}
텍스트 상자의 클릭 이벤트에 사용할 구문:
onClick="CapitaliseFirstLetter('myTextboxId'); return false"
각 단어의 첫 글자를 대문자로 변환하는 데 도움이 될 것입니다.
<script>
/* convert First Letter UpperCase */
$('#txtField').on('keyup', function (e) {
var txt = $(this).val();
$(this).val(txt.replace(/^(.)|\s(.)/g, function ($1) {
return $1.toUpperCase( );
}));
});
</script>
예 : 제목 대소문자 문장입니다 -> 제목 대소문자 문장입니다
사과드립니다.제가 서두르고 엉성해서 구문이 이상했습니다.여기 있습니다...
$('#tester').live("keyup", function (evt)
{
var txt = $(this).val();
txt = txt.substring(0, 1).toUpperCase() + txt.substring(1);
$(this).val(txt);
});
간단하지만 효과는 있습니다.당신은 이것을 좀 더 일반적이고 플러그를 꽂고 플레이 가능하게 만들고 싶어할 것입니다.이것은 코드가 적은 다른 아이디어를 제공하기 위한 것일 뿐입니다.코딩에 대한 저의 철학은 가능한 한 일반적으로 만들고, 가능한 적게 코드를 만드는 것입니다.
도움이 되길 바랍니다.해피코딩! :)
입력 필드의 첫 글자만 대문자로 쓸 수 있다니 정말 멋진 일입니다. 이것으로..CSS 텍스트 변환처럼 대문자화하는 방법 아는 사람 있으면 capitalize, please resply..여기요..
$('input-field').keyup(function(event) { $(this).val(($(this).val().substr(0,1).toUpperCase())+($(this).val().substr(1))); });
부트스트랩을 사용하는 경우 다음을 추가합니다.
class="text-capitalize"
예를 들어,
<input type="text" class="form-control text-capitalize" placeholder="Full Name" value="">
터키산.만약 누군가가 여전히 관심이 있다면.
$('input[type="text"]').keyup(function() {
$(this).val($(this).val().replace(/^([a-zA-Z\s\ö\ç\ş\ı\i\ğ\ü\Ö\Ç\Ş\İ\Ğ\Ü])|\s+([a-zA-Z\s\ö\ç\ş\ı\i\ğ\ü\Ö\Ç\Ş\İ\Ğ\Ü])/g, function ($1) {
if ($1 == "i")
return "İ";
else if ($1 == " i")
return " İ";
return $1.toUpperCase();
}));
});
자바스크립트를 사용하면 다음을 사용할 수 있습니다.
yourtext.substr(0,1).toUpperCase()+yourtext.substr(1);
PHP로 웹 페이지를 생성하는 경우 다음을 사용할 수도 있습니다.
<?=ucfirst($your_text)?>
Jquery나 Javascipt는 이를 달성하기 위한 기본 제공 메서드를 제공하지 않습니다.
CSS 테스트 변환(text-transform:capitalize;문자열의 데이터를 대문자로 표시하지는 않지만 화면에 대문자로 표시된 렌더링이 표시됩니다.
일반 vanillaJS를 사용하여 데이터 레벨에서 이를 달성하는 보다 합법적인 방법을 찾고 있다면 이 솔루션을 사용하십시오 =>
var capitalizeString = function (word) {
word = word.toLowerCase();
if (word.indexOf(" ") != -1) { // passed param contains 1 + words
word = word.replace(/\s/g, "--");
var result = $.camelCase("-" + word);
return result.replace(/-/g, " ");
} else {
return $.camelCase("-" + word);
}
}
저는 이를 달성할 때 CSS와 jQuery 솔루션을 모두 사용합니다.이렇게 하면 브라우저에 표시되는 방식과 데이터 값이 모두 변경됩니다.간단한 해결책은 효과가 있습니다.
CSS
#field {
text-transform: capitalize;
}
jQuery
$('#field').keyup(function() {
var caps = jQuery('#field').val();
caps = caps.charAt(0).toUpperCase() + caps.slice(1);
jQuery('#field').val(caps);
});
예외를 인정하는 솔루션(파라미터 전달):
아래 코드를 복사하여 다음과 같이 사용합니다: $('my selector').maskOwnName(['of', 'on', 'a', 'as', 'at', 'for', 'in', 'to']);
(function($) {
$.fn.maskOwnName = function(not_capitalize) {
not_capitalize = !(not_capitalize instanceof Array)? []: not_capitalize;
$(this).keypress(function(e){
if(e.altKey || e.ctrlKey)
return;
var new_char = String.fromCharCode(e.which).toLowerCase();
if(/[a-zà-ú\.\, ]/.test(new_char) || e.keyCode == 8){
var start = this.selectionStart,
end = this.selectionEnd;
if(e.keyCode == 8){
if(start == end)
start--;
new_char = '';
}
var new_value = [this.value.slice(0, start), new_char, this.value.slice(end)].join('');
var maxlength = this.getAttribute('maxlength');
var words = new_value.split(' ');
start += new_char.length;
end = start;
if(maxlength === null || new_value.length <= maxlength)
e.preventDefault();
else
return;
for (var i = 0; i < words.length; i++){
words[i] = words[i].toLowerCase();
if(not_capitalize.indexOf(words[i]) == -1)
words[i] = words[i].substring(0,1).toUpperCase() + words[i].substring(1,words[i].length).toLowerCase();
}
this.value = words.join(' ');
this.setSelectionRange(start, end);
}
});
}
$.fn.maskLowerName = function(pos) {
$(this).css('text-transform', 'lowercase').bind('blur change', function(){
this.value = this.value.toLowerCase();
});
}
$.fn.maskUpperName = function(pos) {
$(this).css('text-transform', 'uppercase').bind('blur change', function(){
this.value = this.value.toUpperCase();
});
}
})(jQuery);
.first-character{
font-weight:bold;
color:#F00;
text-transform:capitalize;
}
.capital-text{
text-transform:uppercase;
}
저의 시도.
모든 텍스트가 소문자이거나 모두 대문자인 경우에만 작동하며 로케일 대소문자 변환을 사용합니다.이름에서 의도적인 대소문자 차이 또는 a 또는 "를 존중하려고 시도합니다.전화기에 불편을 주지 않기 위해 블러에서 발생합니다.선택 시작/종료 상태로 남았지만 키업으로 변경된 경우 여전히 유용할 수 있습니다.전화기에서 작동해야 하지만 시도하지 않았습니다.
$.fn.capitalize = function() {
$(this).blur(function(event) {
var box = event.target;
var txt = $(this).val();
var lc = txt.toLocaleLowerCase();
var startingWithLowerCaseLetterRegex = new RegExp("\b([a-z])", "g");
if (!/([-'"])/.test(txt) && txt === lc || txt === txt.toLocaleUpperCase()) {
var stringStart = box.selectionStart;
var stringEnd = box.selectionEnd;
$(this).val(lc.replace(startingWithLowerCaseLetterRegex, function(c) { return c.toLocaleUpperCase() }).trim());
box.setSelectionRange(stringStart, stringEnd);
}
});
return this;
}
// Usage:
$('input[type=text].capitalize').capitalize();
큐뮬의 솔루션에 대한 약간의 업데이트.
단어 사이에 두 개 이상의 공백이 있는 경우 opperFirstAll 함수가 제대로 작동하지 않습니다.이 식을 해결하기 위해 정규식을 바꿉니다.
$(this).val(txt.toLowerCase().replace(/^(.)|(\s|\-)+(.)/g,
언급URL : https://stackoverflow.com/questions/2017456/with-jquery-how-do-i-capitalize-the-first-letter-of-a-text-field-while-the-user
'programing' 카테고리의 다른 글
| AngularJsui-router: 강제 재로드 (0) | 2023.10.06 |
|---|---|
| MariaDB에서 루트 암호를 암호화하는 방법은? (0) | 2023.10.06 |
| 모든 항목이 중간 텍스트 크기의 필드 안에 들어갈 때 MySQL 긴 텍스트 크기의 필드를 사용하면 어떤 단점이 있습니까? (0) | 2023.10.06 |
| spring-data-jpa 및 spring-mvc로 데이터베이스 행 필터링 (0) | 2023.10.06 |
| WordPress와 데이터베이스 연결 설정 오류 디버그 방법 (0) | 2023.10.06 |