[英]Trying to get Uppercase lowercase jquery code to work
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. 而且我不知道为什么jQuery不执行以更改
input
大小写。
Can anyone cast me a string? 谁能给我一个弦?
You search for an element with id=text
, but you don't have that. 您搜索
id=text
的元素,但是没有那个。 It is better to use this
which is provided by jQuery to your callback function: 这是更好地使用
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">
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:
我已注释掉有关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>
you always can use this
for your callback function in jQuery. 您总是可以
this
用于jQuery中的回调函数。
PS - You don't have id="text"
in your input. 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">
Stick to jquery :) 坚持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);
});
Changed the var z=document.getElementById("text").value;
更改了
var z=document.getElementById("text").value;
to var z=$("#text").value();
到
var z=$("#text").value();
This should do what you need. 这应该做您需要的。 Hope it helps :)
希望能帮助到你 :)
$(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">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.