试图让大写的小写jquery代码工作(Trying to get Uppercase lowercase jquery code to work)

我有以下代码：

$(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  
 
 任何人都可以给我一个字符串？ 
I have the following Code: 
 
 
 
  
  
$(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"> 
  
 
 
and I am missing why the jQuery does not execute to change the input case. 
 
 
 input : JOHN DOE expected output : John Doe 
 
Can anyone cast me a string?
                
最满意答案
                
                    
                        
 你搜索id=text的元素，但你没有。 最好使用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"> 
  
 
 
 如果您希望在表单提交时也发生这种情况，那么还要捕获该提交事件。 在下面的剪切中没有给出警报，但是替换是在输入值上完成的。 我已经对模糊事件的操作进行了注释，因此很明显提交按钮也会执行该操作： 
 
 
 
  
  
// 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> 
  
 
You search for an element with id=text, but you don't have that. It is better to use this which is provided by jQuery to your callback function:
 
 
 
  
  
$(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"> 
  
 
 
If you want to have this happen also when the form submits, then also capture that submit event. In below snipped no alert is given, but the replacement is done on the input value. I have commented out the action on the blur event, so it is clear that the submit button also performs that action:
 
 
 
  
  
// 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>