I'm trying to insert something in a text area (#note_text) from a drop down list (#note_template). User should be able to insert a number of items into the text area in between typing characters using the keyboard. Similar to selecting from a collection of emoticons to be put in the message.
When done in the followign way, the text area can receive items after typing.
function update1() {
$txt = $("#note_text").val() + $("#note_template option:selected").val() ;
$("#note_text").val($txt);
$("#note_template").val("");
}
But when done in the following way, the content of the text area wouldn't update after typing. Only before typing I can insert items from the drop down list.
function noteTempalteSelected() {
$("#note_text").append( $("#note_template option:selected").val() );
$("#note_template").val("");
}
So it seems that the use of append causes the text area to freeze. Could anyone explain why ? Thank you.
Ok I think I know whats going on here. For the append to work properly, the element should have an innerHTML property or html() in jquery. Textarea just like the input has a val() property. So for this to work properly you should try this:
$('#note_template').on('click', 'option:selected', function(e){
var txtArea = $('#note_text');
txtArea.val(txtArea.val() + $(this).val());
$(this).val('');
});
[DEMO HERE][1]
Related
I am using select2 and I use it for a single choice. I want to move the result of what we have chosen to another div.
Please check my code:
https://jsfiddle.net/hxe7wr65/
How to move it? because I don't want the result to show in the box. I want the box still clear and even after I choose, the placeholder still shows up.
This is the design that i'm doing right now
in that image. its only can choose 1 option. after we choose. the result show up to another place and so the select still have the placeholder in it. please guys help me.
thank so much
Ok I'm not 100% sure this is what you're looking for, but I think you wan't the grab value of the last selected item, transfer it to another div and then clear the input.
For the first step add an event handler to it.
var $eventSelect = $("#position"); //select your select2 input
$eventSelect.on('select2:select', function(e) {
console.log('select')
console.log(e.params.data.id) //This will give you the id of the selected attribute
console.log(e.params.data.text) //This will give you the text of the selected text
})
Now that you have the value, transferring it to the other div is relatively simple.
var $eventSelect = $("#position"); //select your select2 input
$eventSelect.on('select2:select', function(e) {
var text = e.params.data.text
$("#otherdiv").append(text)
})
Then to clear the form
var $eventSelect = $("#position"); //select your select2 input
$eventSelect.on('select2:select', function(e) {
var text = e.params.data.text
$("#otherdiv").append(text)
$(this).val('');
// or depending no what version you are using
$(this).select2('val', '')
})
I'm currently working on http://flickogram.com.
I need to put rich comment textbox like facebook has.
Currently, I've developed a jquery plugin and you can find its working on http://jsfiddle.net/mike_ivanenko/k6zH6/3/
You can use the plugin as following.
$(document).ready(function() {
$('#ttt').richtextbox( {
highlights: [
{char:'#', class:'highlighted', markup: 'topic'},
{char:'#', class:'highlighted', markup: 'people'}
]
,change:function(richtextfield, input) {
$('#output').val(input.val());
}
}
);
});
It works pretty well for putting topic by typing hash(#), but I can't find a way to deal with people's name by typing #.
My intention is as followings.
When user types #, drop-down box with search text field will be shown just below the current textbox and user can search for the name.
Then the result will be shown in the dropdown, and on clicking the item will be entered in the main text field. But it should be non-editable. Deleting by [Delete] or [Backspace] key is available.
Any suggestions?
Or please help me out this on github.com/mike-ivanenko/richtextbox
Thank you
Mike
you should check out html5's contenteditable feature
Edit: (fixed)
here's what you need
http://jsfiddle.net/ZQSHT/2/
$('div').keyup(function(){
var test = $(this).text();
if( test.indexOf('#') >= 0){
// Found world
alert('#');
$('input').focus();
}
});
$('input').change(function(){
alert( $('input').val() );
$('div').append('#'+$('input').val()+'');
});
I have a div with a string of content in it. The content is not stored in a variable and I would like to remove the last character of the text in this div. Any help please?
More info:
I have a text field, and upon entering text into the text field, the text appears in a div in large writing. When the user hits the back-space key, I want the last character in the div to be deleted. I am mainly using jQuery to achieve this. Here is my code:
$(document).ready(function(){
$("#theInput").focus(); //theInput is the text field
$('#theInput').on('keypress', printKeyPress);
function printKeyPress(event)
{
//#mainn is the div to hold the text
$('#mainn').append(String.fromCharCode(event.keyCode));
if(event.keyCode ==8) //if backspace key, do below
{
$('#mainn').empty(); //my issue is located here...I think
}
}
});
I have attempted $('#mainn').text.slice(0,-1);
I have also tried storing the value of #theInput in a variable and then printing it, but that didn't work. Any ideas ?
$('#mainn').text(function (_,txt) {
return txt.slice(0, -1);
});
demo --> http://jsfiddle.net/d72ML/8/
Are u sure u want to remove only last character. What if the user press backspace from the middle of the word.. Its better to get the value from the field and replace the divs html.
On keyup
$("#div").html($("#input").val());
var string = "Hello";
var str = string.substring(0, string.length-1);
alert(str);
http://jsfiddle.net/d72ML/
I am using CKEditor ver.3.6 in my MVC Application.
My requirement is to update the selected text with new text in the ckEditor. I could find out the method editor.getSelection().getSelectedText(); for getting selected text from the editor. I need to add some tag with the selected text when a toolbar button is pressed and update the selected content using javascript.
For Example :
Content in the ckEditor is
<span>Edit content in the editor</span>
and I have selected the word “editor” from ckEditor. I have to update the selected word “editor” with “ckEditor” using javascript code.
Please suggest a proper solution.
It looks to me from the docs as the following would work (untested):
editor.insertText("ckEditor");
Use this function in the onclick event of a button.
function Replace()
{
//after selecting the text in the editor
//get text to replace;
var repStr=$("#repTxt").val();
editor.insertHtml(repStr);
}
Cheers
Sunil Raj
Both editor.insertText() and editor.insertHtml() should work, but you have to make sure the editor is ready before you attempt to update the text:
var editor = CKEDITOR.replace('editor');
editor.on('instanceReady', function(){
editor.insertHtml('...');
});
I know if I want to change the value of an input on a form according to what a user types into another input using:
$('#inputName').change(function() {
$('#inputURL').val($('#inputName').val());
});
But I'd like to have it so when someone types into the input it updates a Div with the text instead. IE they type into #inputName and this happens:
<div id="personsName"> text appears here as they type</div>
How'd I go about doing that? I doesn't work when I change #inputURL into #personsName :(
The change event is only triggered when leaving the textfield, so use keypress instead if you really want to "update the text on typing into a text field". .val only applies to form elements which actually have a value (e.g. <input> and <textarea> elements). In all other cases, you need the text method for modifying the text .
$("#inputName").keypress(function () {
$("#personName").text(this.value);
});
You can test this code here: http://jsfiddle.net/ntBnA/
You're almost there:
$('#inputName').change(function() {
$('#personsName').text($('#inputName').val());
});
//Cache this bad boy, its being repeatedly used!
var personsName = $('#personsName');
$('#inputName').bind({
keyup: function () {
//This is what you want.
personsName.text($(this).val());
},
change: function () {
//This is what you were doing. See the difference?
$('#inputURL').val($(this).val());
}
});