2017-09-08 230 views
7

1)我试图申请大写的第一个字母和其他小写。如果用户在输入中写入,它应该自动转换。例子:如何把第一个字母大写,其余小写? [JS]

“艾萨克·吉列尔梅阿劳霍” 到 “以撒的Guilherme阿劳霍”

“艾萨克·吉列尔梅·阿劳霍” 到 “以撒的Guilherme阿劳霍”

2)在巴西有与联结的名字。 例如:“das”“da”“dos”“do”“de”“e”。

卡洛斯·爱德华多·胡里奥DOS桑托斯

卡洛斯·爱德华多·DOS桑托斯Ë席尔瓦

卡洛斯·爱德华多·席尔瓦

3)我有这个问题使用名称字段。用下面的代码,我可以将第一个字母用大写字母,但其他字母用小写字母不能。然后,根据问题的编号为2,如果我写:

值中输入: “于格拉奥利维拉小辈”

应该是: “道格拉斯·奥利维拉小辈”

不该't:“douglas de OliveiraJúnior”。与当前的代码所示

function contains(str, search){ 
 
if(str.indexOf(search) >= 0){ 
 
    return true; 
 
} else { 
 
    return false; 
 
} 
 
} 
 

 
$.fn.capitalize = function(str) { 
 
    $.each(this, function() { 
 
     var split = this.value.split(' '); 
 
     for (var i = 0, len = split.length; i < len; i++) { 
 
      var verify = (split[len - 1] == "D" || split[len - 1] == "d") && (str == "e" || str == "E") || (str == "o" || str == "O"); 
 
      if (verify == false) { 
 
       if (contains(split[i], 'de') == false && contains(split[i], 'do') == false) { 
 
        split[i] = split[i].charAt(0).toUpperCase() + split[i].slice(1); 
 
       } 
 
      } 
 
     } 
 
     this.value = split.join(' '); 
 
    }); 
 
    return this; 
 
}; 
 

 
$(".capitalize").keypress(function(e) { 
 
    var str = String.fromCharCode(e.which); 
 
    $(this).capitalize(str); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label>Nome: </label> 
 
<input type="text" id="nome" name="nome" class="form-control input-sm capitalize">

我在这里#2的新成员,我的失误道歉//值,我学习JavaScript。谢谢!

+0

做它,因为他们将键入搞砸了删除键,把光标放在不同的地方,等 – epascarello

+1

是否必须要对按键?只有改变时才会更容易改变价值。这样做也会更实用,因为现在你不能将光标置于输入中间并正确编辑。 –

+0

我认为它应该是:var str = String.fromCharCode(e.target.innerHtml); https://api.jquery.com/event.target/ – kangaro0

回答

2

此解决方案还修复了大写的连接词,如carlos DE silva
与片段试试下面:)

var connectives = { 
 
    das: true, 
 
    da: true, 
 
    dos: true, 
 
    do: true, 
 
    de: true, 
 
    e: true 
 
}; 
 

 
function capitalize(str) { 
 
    return str 
 
     .split(" ") 
 
     .map(function(word) { 
 
      return !connectives[word.toLowerCase()] 
 
       ? word.charAt(0).toUpperCase() + word.slice(1).toLowerCase() 
 
       : word.toLowerCase(); 
 
     }) 
 
     .join(" "); 
 
}; 
 

 
$(".capitalize").keyup(function() { 
 
    var cursorStart = this.selectionStart; 
 
    var cursorEnd = this.selectionEnd; 
 
    var capitalizedString = capitalize($(this).val()); 
 

 
    $(this).val(capitalizedString); 
 
    this.setSelectionRange(cursorStart, cursorEnd); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label>Nome: </label> 
 
<input type="text" id="nome" name="nome" class="form-control input-sm capitalize">

+0

你好朋友,谢谢你的贡献!!这个解决方案也修复大写的连接词,但继续问题,你不能把光标放在输入中间并正确编辑。 。但是,谢谢:) –

+0

@PauloPitta做了一个编辑,现在应该工作。 –

+0

谢谢,现在作品!你能告诉我从你的代码到这些的区别吗? https://stackoverflow.com/a/46122855/8577413 –

1

您可以使用格式化函数,该函数会将除白名单中提供的单词之外的所有单词进行大写处理。每当用户按下一个键然后格式化输入值(不能很好地工作,如果用户虽然四处移动输入光标):

function format(string, noCapList=[]) { 
 
    const words = string.toLowerCase().split(' '); 
 
    return words.map((word) => { 
 
    if(!word.length || noCapList.includes(word)) { 
 
     return word; 
 
    } else { 
 
     return word[0].toUpperCase() + word.slice(1); 
 
    } 
 
    }).join(' '); 
 
} 
 

 
const input = document.querySelector('input'); 
 
input.addEventListener('keyup',() => { 
 
    input.value = format(input.value, ["das", "da", "dos", "do", "de", "e"]); 
 
});
<input/>

它看起来像问题与您的代码是在如何格式化输入。我不是100%确定我明白了这个问题,但是这个格式函数提供了你正在寻找的输出。

+0

你好朋友,谢谢你的贡献,忘了提及我没有使用javascript6。但是问题是当用户把光标放在输入中间改变时 –

0

SimpleJ的答案是正确的,但要弄清楚你的原来的做法:“问题”是在contains功能 - 它实际上应该根据什么来它的名字,如果str包含search,所以contains('douglas', 'do') === true返回true;您已将字符串拆分为单独的单词,因此只需使用split[i] !== "de" && split[i] !== "do"而不是contains调用。

+0

嗨,朋友,谢谢你的贡献,这是真的,缺乏关注 –

0

我已经在FCC公布的算法大约标题套管的句子。可能会帮助你!

function titleCase(str) { 
    //First Converted to lowercase in case of test cases are tricky ones 
     var spl=str.toLowerCase(); 

     //Then Splitted in one word format as leaving one space as ' ' 
     spl = spl.split(' '); 

     for(var i=0;i<spl.length;i++){ 

     //Again Splitting done to split one letter from that respective word 
     var spl2= spl[i].split(''); 

     // In specific word's letter looping has to be done in order to 
     // convert 0th index character to uppercase 
     for(var j=0;j<spl2.length;j++){ 

     spl2[0]= spl2[0].toUpperCase(); 
     } 
     // Then Joined Those letters to form into word again 
     spl[i] = spl2.join(''); 
     } 
     // Then joined those words to form string 
     str = spl.join(' '); 
     return str; 
    } 

titleCase("sHoRt AnD sToUt"); 
+0

你好朋友,谢谢你的贡献,我了解你用来改变字母的逻辑。我们在这里提出的问题是关于当用户按下任何键时直接在输入中进行更改。谢谢你的解释! –

0

我发现了一些显然令人满意的东西。它甚至在用户将光标置于输入中间时起作用。我在这里找到它: Link - Stackoverflow

任何人都可以在这里评估并告诉我,如果用户Doglas有这个代码有问题吗?

function ucfirst (str) { 
 
    // discuss at: http://locutus.io/php/ucfirst/ 
 
    str += ''; 
 
    var f = str.charAt(0).toUpperCase(); 
 
    return f + str.substr(1); 
 
} 
 

 
var not_capitalize = ['de', 'da', 'do', 'das', 'dos', 'e']; 
 
$.fn.maskOwnName = function(pos) { 
 
    $(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] = ucfirst(words[i]); 
 
     } 
 

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

 
}; 
 

 
$('.capitalize').maskOwnName();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label>Nome: </label> 
 
<input type="text" id="nome" name="nome" class="form-control input-sm capitalize">

+0

它使用关键事件,而jQuery完善了输入事件处理效率不高。 – zer00ne

相关问题