輸入文本格式，jQuery，Javascript或Css

雖然在輸入中輸入首字母應改爲大寫，但其餘字母應該小寫，即使用戶輸入大寫字母它應該將其改爲小寫。輸入文本格式，jQuery，Javascript或Css

例輸入字：鼠標，電腦

重要的一點：鍵入時應該更改爲：鼠標，電腦

我試過很多Stackflow soloution，但對於上面的邏輯找不着。

使用CSS：Click Here

使用Javacript：Click Here（這一個工作，但對於最後一個字母它不工作）

任何解決方案是使用jQuery JavaScript或CSS時

$(document).ready(function() { 
    //alert('ready'); 

    $('input').on('keypress', function(event) { 
     var $this = $(this), 
      val = $this.val(); 

     val = val.substr(0, 1).toUpperCase() + val.substr(1).toLowerCase(); 
     $this.val(val); 
    }); 
});

接受

來源

2014-04-25 Rishi

你的JS小提琴（最後一個）爲我工作？你有什麼問題？ – leo

-1

試試這個CSS解決方案。

DEMO

input { 
    text-transform:capitalize; 
    color: blue; 
} 


$(document).ready(function(){ 

    $("input").on("keypress",function(){ 

     $(this).val($(this).val().toLowerCase()); 

    }); 

})

來源

2014-04-25 10:04:52

**但是，即使在輸入值中間輸入大寫用戶輸入大寫字母，其他字母也應該小寫**。 – Rishi

是的..你檢查過演示嗎？結果就像這樣**「Bbbbbbb」** –

只有當你輸入'bbbbbbb'時，如果你輸入'bbbBBB'它會以'BbbBBB'出現 – Quentin

使用input事件而不是keypress事件。

$('input').on('input', function(event) {

來源

2014-04-25 10:11:09 Quentin

我認爲'keyup'事件更好 –

'如果用戶粘貼到字段中''keyup'不會觸發 – Quentin

不，你會錯誤的鍵入更好，是的，它會觸發粘貼 –

function initCap(t){  
t.value=t.value.toLowerCase(); 
t.style='text-transform:capitalize;' 
}

調用的方法OnKeyPress和的onblur

來源

2014-04-25 10:15:30

嘗試這個

$('input').on('keyup', function(event) { 
    var firstchar = $(this).val().substring(0,1); 
    var remainchar = $(this).val().substring(1,$(this).val().length).toLowerCase(); 
    $(this).val(firstchar + remainchar); 
}); 
$('input').on('keydown', function(event) { 
    var firstchar = $(this).val().substring(0,1); 
    var remainchar = $(this).val().substring(1,$(this).val().length).toLowerCase(); 
    $(this).val(firstchar + remainchar); 
});

DEMO

來源

2014-04-25 10:20:56 Dhambha

它的工作原理，但鉻瀏覽器版本34中有一個錯誤，你不能左箭頭鍵向後移動。任何方式這個解決方案也有幫助謝謝。 – Rishi

會很有趣指出，CSS text-transform: capitalize;只有改變顯示的inpu t，而Javascript修改實際的HTML值。如果輸入是例如CAPTCHA響應或需要驗證的表單輸入字段，則這很重要。

使用純JavaScript，你可能分裂輸入成單獨的單詞&變換他們中的每一個，就像這樣：

HTML

<div id="transform">mOuSE, cOmPUTEr</div> 
<button type="button">Capitalize</button>

var rgx = /,/; /* word splitter, can be anything */ 
var target = document.getElementById('transform'); 
document.getElementsByTagName('button')[0].onclick = function() { 
    var strArr = target.innerHTML.split(rgx); /* split the input */ 
    for (var word = 0; word < strArr.length; word++) { /* iterate over each word */ 
    strArr[word] = strArr[word].toLowerCase().trim(); 
    var firstLetter = strArr[word].substr(0,1).toUpperCase(); 
    var otherLetters = strArr[word].substr(1, strArr[word].length) 
    strArr[word] = firstLetter+otherLetters; 
    } 
    target.innerHTML = strArr.join(); 
}

演示：http://jsbin.com/farib/2/edit

注意：如果您的輸入爲<textarea>或<input>，請將.innerHTML替換爲.value。

來源

2014-04-25 10:44:47 Tyblitz

輸入文本格式，jQuery，Javascript或Css

回答

相關問題