試圖使大寫小寫的jQuery代碼起作用

Question

我有以下代碼：

 $(document).on('blur', '.upperlower', function() { var z = document.getElementById("text").value; var x = z.toLowerCase(); x = x.replace(/\\b./g, function(m) { return m.toUpperCase(); }); alert(x); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="text" class="form-control upperlower" placeholder="Last Name, First Name"> 

而且我不知道為什么jQuery不執行以更改input大小寫。

• 輸入：JOHN DOE預期輸出：John Doe

誰能給我一個弦？

Answer 1

您搜索id=text的元素，但是沒有那個。 這是更好地使用this這是由jQuery的提供給您的回調函數：

 $(document).on('blur','.upperlower',function(){ var z=this.value; var x=z.toLowerCase(); x=x.replace(/\\b./g, function(m){ return m.toUpperCase(); }); alert(x); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" class="form-control upperlower" placeholder="Last Name, First Name"> 

如果您希望在提交表單時也發生這種情況，則還應捕獲該提交事件。 在下面的片段中，沒有給出警報，但是替換是在輸入值上完成的。 我已注釋掉有關blur事件的操作，因此很明顯，Submit按鈕也執行該操作：

 // create a named function, so both event handlers can use the same code: function upperLower(){ this.value = this.value.toLowerCase() .replace(/\\b./g, function(m){ return m.toUpperCase(); }); } // Uncomment this line if you want the action to happen on blur as well //$(document).on('blur','.upperlower', upperLower); $('form').on('submit', function() { $('.upperlower').each(upperLower); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input type="text" class="form-control upperlower" placeholder="Last Name, First Name" value="john DOE"> <input type="submit" value="submit"> </form> 

Answer 2

您總是可以this用於jQuery中的回調函數。

PS-您的輸入中沒有id="text" 。

 $(document).on('blur', '.upperlower', function() { var z = this.value; var x = z.toLowerCase(); x = x.replace(/\\b./g, function(m) { return m.toUpperCase(); }); console.log(x); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="text" class="form-control upperlower" placeholder="Last Name, First Name"> 

Answer 3

堅持jQuery :)

$(document).on('blur','.upperlower',function(){
            var z=$("#text").val();
            var x=z.toLowerCase();
            x=x.replace(/\b./g, function(m){ return m.toUpperCase(); });
            alert(x);   
});

更改了var z=document.getElementById("text").value; 到var z=$("#text").value();

演示

Answer 4

這應該做您需要的。 希望能幫助到你 ：）

 $(document).on('blur','.upperlower',function(){ var z= $(this).val(); var x= z.toLowerCase(); x=x.replace(/\\b./g, function(m){ return m.toUpperCase(); }); alert(x); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <input type="text" id = "myID" class="form-control upperlower" placeholder="Last Name, First Name">