Currently, my text field will only change its appearance after clicking on it (see attached screenshot). I am trying to change it so that it appears like that all the time, without the need to click on it (the field is pre-filled with values).
Here is the relevant code:
HTML:
<input type="text" value="1234567890" id="customersNumber" data-type="phone">
JQuery JS:
$(document).on('focus', 'input[data-type="phone"]', function() {
$(this).mask("(999) 999-9999");
});
Thank you.
Related
I copy need the dynamic text of a spam that is generated by a slider that the user sets. It must be copied to a value of an input.
I tried that, and didnt work:
<h4>Valor do consórcio: <span class="slider-value quote-form-element valor-carro1" data-name="Valor | Automóvel" name="Valor" data-slider-id="consorcio-auto">R$ <span id="THAT_VALUE"></span></span>
</h4>
<div class="slider" data-slider-min="20000" data-slider-max="100000" data-slider-start="23192" data-slider-step="1000" data-slider-id="consorcio-auto"></div>
<h4>Seus dados:</h4>
<input type="hidden" id="THAT_FIELD" name="THAT_FIELD" value="" />
<h4>Seus dados:</h4>
<input type="hidden" id="valorcarro" name="valorcarro" value="" />
script
$(function(){
var valorcarro = $('#THAT_VALUE').html();
$('#THAT_FIELD').val(valorcarro);
});
example in this page in the button on menu "Simulação".
The script just does not copy because the value is generated later and the user can still change
You need to use an event to fire your code after the slider value has changed. This is how you do it with a bootstrap slider.
$('.slider').on('slideStop', function () {
var valorcarro = $('#THAT_VALUE').text();
$('#THAT_FIELD').val(valorcarro);
});
To get the text of an element, use text()
For example
$("span").text();
you can try this code.
jQuery(function(){
var valorcarro = jQuery('#THAT_VALUE').text();
jQuery('#THAT_FIELD').val(valorcarro);
});
Actually, #Pamblam's response is better than mine. I was assuming the .slider class was for regular range inputs, which fire the 'change' event when their value changes, but it looks like it is in fact a bootstrap slider, which fires the slideStop event instead. Regardless, the code here listens for a change in the slider value, and when it is triggered, takes the text from the #THAT_VALUE span (from op's code) and sets the value of the #THAT_FIELD field to whatever it is :
$(".slider").change(function(){
var valorcarro = $('#THAT_VALUE').text();
$('#THAT_FIELD').val(valorcarro);
});
I am using a jQuery plugin that needs to add attribute to all inputs in a page.
$("input").attr('lang', 'fa');
I have no problem for adding this to all inputs except for DataTables search box that this code doesn't affect.
I also tried this code but it doesn't work:
$(document).ready(function () {
var table = $('#OrdersTable').dataTable();
$('.dataTables_filter input').attr('lang','fa');
$("input").attr('lang', 'fa');
});
Edit:
I tried many things but the problem still exists. To see the problem look at this link and type numbers in search box and the input box at the bottom of the page.
CAUSE
DataTables uses <input type="search"> for the search box. For some reason applying lang attribute doesn't have any effect on that input type.
SOLUTION
Changing input type to <input type="text"> fixes the issue.
$('#example').DataTable();
$('.dataTables_filter input').attr({'lang': 'fa', 'type': 'text'});
DEMO
See jsFiddle for code and demonstration.
When a user pastes some text into a field I want to be able to remove all spaces instantly.
<input type="text" class="white-space-is-dead" value="dor on" />
$('.white-space-is-dead').change(function() {
$(this).val($(this).val().replace(/\s/g,""));
});
http://jsfiddle.net/U3CRg/22/
This code from another example works. But doesn't update until a user clicks on something besides the textbox. I am using MVC with jQuery/JavaScript.
Switch the event change for input, which will trigger whenever something is inputted into the field, even if text is being pasted.
$('.white-space-is-dead').on('input', function() {
$(this).val($(this).val().replace(/\s/g,""));
});
Take a look at jQuery Events to understand better what options you have.
Edit: updated the answer based on OP's comment and what I found on this answer.
The regex wasnt doing what you wanted. This works but does not fire until the text input loses focus.
$('.white-space-is-dead').change(function() {
$(this).val($(this).val().replace(/ /g,''));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="white-space-is-dead" value="dor on" />
My ultimate goal is to add some validation to a set of date fields. However, my javascript sucks, so I'm starting small.
I am starting out by trying to get an alert message when a user leaves a field.
(For simplicity I'm just doing it all in my view...) Heres what I go to work...
# html.erb-template
<div class="from_date">
From Date
<input type="text" id="from_date" name="from_date"></input>
</div>
<script>
$("#from_date").blur( function() {
alert("boom!");
});
</script>
Your code seems to be fine - problem is that class and id are named the same, but you want to watch the input field not the surrounding div.
I just made a fiddle from your script and changed
the listener to be attached to the input field's id - and it's working.
the alert into a console.log
see
$("#from_date").blur(function() {.....
// instead of
$(".from_date").blur(function() {.....
I am using javascript function keyup with editable div and text input filed use for add text into editable div so my code work fine but recently i am add CKeditor plugin for editing text.
for example if i set text in input field keyup function work and these text set into editable div now i want to use Ckeditor for customizing after customization if i want to change text with input field than editing lost and return on default style.
Javasacript
$('#input1').keyup(function () {
txt = $('#input1').val();
$('#field1').text(txt);
});
HTML
<input type="text" id="input1">
<div id="field1" contentEditable='true'; ></div>
Try using the following:
$(document).on("keydown", "#input1", function() {
txt = $('#input1').val();
$('#field1').text(txt);
});
Online example
EDIT 1:
If you want to make sure that the initial input is also updated upon change of div, you should try the following:
$(document).on("DOMSubtreeModified", "#field1", function() {
$('#input1').val($('#field1').text());
});
Try clicking on the button or modifying div's content via Firebug, for example and see how input is also changed.
I wouldn't use keyup in your case but changed it as such upon your request.
Online example