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
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 want to know how to make a input text field like the one in facebook or twitter where text smiles are converted into graphics and the ability to add extra markup.
I have gone through other stackoverflow questions like
How do I make an editable DIV look like a text field?
So I know how to make an editable div using contenteditable, thats not what I wanted to know.
I have inspected facebook comment box via chrome and it shows they use an Invisible input box and a div to show the output
I have removed facebook classes and added some my own styles to see the input box
So what i want to know is
How the input can be hidden and the things that user enters shows up in the div
How to make the hidden input field to be selected when the user focus on div
I want to know how to implement this technique with an input[type=text] and div
In General It would be much helpful if adding a hash tag method is explained. Thanks!
You can use keypress event of jQuery for input and you can update any div or hidden input element
$( "#target" ).keypress(function( event ) {
if ( event.which == 13 ) {
event.preventDefault();
}
$(".div").html($(this).val());// you can play with this
$(".input").val($(this).val());
});
For more details visit jquery doc page http://api.jquery.com/keypress/
For css tell me in details what you want to do i will explain it
With Javascript:
//Add this on input
onKeyDown="keyCounter(this,'div id')"
function keyCounter(field,cntfield) {
var fval=field.value;
//this is the div you can play around
document.getElementById('cntfield').innerHTML = fval;
}
I could do this by,
Hiding the input using
Add CSS to make the div look like input field (.falseInput )
When user selects the falseInnput the hidden Input is focused
The JavaScript function is fired when keyup event is used
HTML
<body>
<input id="Input" type="text" name="Input" />
<div class="falseInput"></div>
</body>
CSS
/*to hide the input field use Opacity, if
display:none
is used the input cannot be focused*/
input{opacity: 0; }
.falseInput{
//css to make div look like input feild
// by modifying the :focus also changing styles
}
JavaScript
//This example is used inorder to add extra markup for makinng a hashtags
document.getElementById("Input").addEventListner("keyup", process, false);
document.querySelector(".falseInput").addEventListner("click", function(e){
document.getElementById("Input").focus();
}, false);
function process(e){
//for processing hashtags
var tag = { hash: 51, space:32 }
, hashtags = false
,input_feild = document.querySelector(".falseInput");
switch (e.which) {
case tag.hashtag:
if(e.shiftKey === true && e.keyCode == tag.hash){
input_field.appendChild(this.value + "<span class='highlight'>");
}
hashtags = true;
break;
case tag.space:
if(hashtags) {
input_field.appendChild(this.value + "</span>");
hashtags = false;
}
break;
}
}
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.
I have jquery that generates textareas with different id's. Now i need to make some buttons that will format text inside that textareas. For example: when user clicks in certain textarea, enter text, and click "bold" button, only text inside of that textarea will become bold (in other will be normal). I did manage to make something like this with JS, but it was too primitive (text was formated in all of textboxes) :(
Here is some sample code for this:
<button id="bold">B</button>
<textarea id="ta_1">Some test text</textarea>
<textarea id="ta_2">Some test text</textarea>
What i want to say: one button, multiply text boxes. Entering text in ta_1 and clicking bold, should bold only text in that txtarea. Additional info: all id's starting with same word, just different number at the end.
I feel there is some simple solution, just cant figure it out :D
Actually this is a really bad practice, but you can do that like this,
var activeEl;
$("textarea").focus(function() {
activeEl = $(this);
});
$("#bold").click(function() {
$("textarea").css("font-weight", "");
activeEl.css("font-weight","bold");
});
DEMO
UPDATE-1: I don't know why you are trying to do this, but I suggest to you use a WYSIWYG Editor like elRTE
UPDATE-2 : You can costomize your toolbar in elRTE, if you want your editor has just a "bold" button, yes you can do that,
$(document).ready(function() {
elRTE.prototype.options.panels.web2pyPanel = ['bold'];
elRTE.prototype.options.toolbars.web2pyToolbar = ['web2pyPanel'];
var opts = {
toolbar: 'web2pyToolbar',
}
var rte = $('#our-element').elrte(opts);
});
DEMO FOR elRTE
I'm not sure this is a great idea for user functionality, but it can be done. You'll just need to record the "active textarea" somwhere. I would suggest using .data(). jsFiddle
//disable the button until we have a target textarea to avoid confusion
$('#bold').attr('disabled','disabled');
//Record a new 'activeElement' each time user focuses a textarea
$('textarea').focus(function(e){
$('#bold').data('activeElement',e.target)
.removeAttr('disabled');//this first time we will enable the bold button
});
//retrieve the stored 'activeElement' and do something to it
$('#bold').click(function(){
var activeElement = $('#bold').data('activeElement');
$(activeElement).css('font-weight','bold');
});
Most people expect a "text formatting" button to work on their selection. Selections and ranges are out of the perview of jQuery and quite complicated to work with. As has been suggested already, I would advise using one of the many wonderful WYSIWYGs like tinyMCE.
Use document.activeElement
var activeEl;
$('#bold').mousedown(function()
{
activeEl = document.activeElement
});
$("#bold").click(function() {
//check activeElement
if(......){
activeEl .css("font-weight","bold");
}
});
Don't forget check that activeElement exactly textarea
In HTML & JS, how do you make a textfield that has grayed out text telling the user what the field is for that goes away when the user clicks on the field?
For example, in firefox the search field in the top right hand side says which search engine it uses when there's nothing entered, then once you click it's an empty textfield, but if you leave it blank and remove focus from the textfield then the grayed out text is back again.
Is there a name for this behavior? Also, is it possible to do in pure css without the use of js to do the on focus / on blur events?
The effect that you are referring to is often called the placeholder effect. Within HTML5 this effect is possible within certain browsers by simply placing the new attribute 'placeholder' within your input tag. Such as...
<input type='text' placeholder='Place Holder Text'/>
<input type='text'/> <!-- Example with no title-->
<input type='text' title='Your title'/>
This can also be done in JavaScript using CSS by setting a style for an active class and toggling the active style along with the item's title tag. Such as ...
$(document).ready(function(){
// Select all input fields. (You will probably want to filter this down even further).
var inputs = $('input[type=text]');
// Set all the inputs to the title value.
inputs.each(function(){
$(this).val($(this).attr('title')).addClass('unfocused'); // Styling Class for inputs.
});
// When the user focuses on an input
inputs.focus(function(){
var input = $(this);
if(input.val() == input.attr('title')){
$(this).removeClass('unfocused').val('');
}
});
// When the user loses focus on an input
inputs.blur(function(){
var input = $(this);
if(input.val() == ''){ // User has not placed text
input.val(input.attr('title')).addClass('unfocused');
}
});
});
The tested function can be seen here: http://www.jsfiddle.net/F8ZCW/5/
This behavior is on my URL shortener site: http://relk.in
The basic idea is when the onfocus event fires, you modify the CSS of the textfield to a normal class, and then onblur, you re-apply the previous class.
And no, you cannot do this in pure CSS.
Example:
var textfield = document.getElementById('someTextField');
textfield.onfocus = function() {
this.className = this.className.replace('oldClassName', 'newClassName');
};
textfield.onblur = function() {
this.className = this.className.replace('newClassName', 'oldClassName');
}