I'm attempting to insert a value before and after a selection within my textbox (upon click of a button).
<script type="text/javascript">
$(document).ready(function(){
$('.boldbutton').on('click', function(){
var body = $("#id_body").val();
var start = body.selectionStart;
var end = body.selectionEnd;
var selection = '<' + body.substring(start, end) + '>';
text = body.substring(0, start) + selection + body.substring(end);
$("#id_body").val(text);
});
});
</script>
If I select 'a' and click the boldbutton, this is what appears in the textbox:
a<a>a
What should appear is
<a>
Any thoughts on why this is happening?
thanks!
Try the following:
$('.boldbutton').on('click', function(){
var body = $("#id_body");
var len = body.value.length;
var start = body.selectionStart;
var end = body.selectionEnd;
var selection = body.value.substring(start, end);
var replace = '<' + selection + '>';
body.value = body.value.substring(0,start) + replace + body.value.substring(end,len);
});
The problem could be that the text field has lost its focus by the time the button gets clicked, hence the empty text selection. One thing you could do is to keep a reference to the selected text before it actually loses the focus (with .blur()), and use this data on the button click handler instead of reading from the current state of the selection, which is again, empty.
$('#id_body').blur(function(e) {
$(this).data('selection', {
start: this.selectionStart,
end: this.selectionEnd
});
})
$('.boldbutton').click(function() {
var $body = $('#id_body');
var sel = $body.data('selection');
var text = $body.val();
var start = sel.start;
var end = sel.end;
var selection = '<' + text.substring(start, end) + '>';
if (end) {
text = text.substring(0, start) + selection + text.substring(end);
$body.val(text);
$body[0].selectionStart = start;
$body[0].selectionEnd = start + selection.length;
}
$body.focus();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="id_body" rows="4">Select some text</textarea>
<button class="boldbutton">Bold me</button>
Related
I want that user to see an alert whenever he doesn't enter proper Google address (or select from suggestion box) on dynamically added text areas. How can I perform that?
I have tried the following code.
I want that when I add new divs at runtime the auto-complete method should apply on that input field and when the user clicks submit button without selecting any suggested address it should display an alert.
Please help me where am I wrong in my code?
function updateNames() {
var rows = $(".clonedInput");
var index = 0;
rows.each(function () {
var inputFields = $(this).find("input");
inputFields.each(function () {
var currentName = $(this).attr("name");
$(this).removeClass("hasDatepicker");
$(this).removeClass("hasTimepicker");
$(this).attr("name", currentName.replace(/\[(.*?)\]/, '[' + index + ']'));
});
var textareaFields = $(this).find("textarea");
textareaFields.each(function () {
var currName = $(this).attr("name");
$(this).attr("name", currName.replace(/\[(.*?)\]/, '[' + index + ']'));
var places = new google.maps.places.Autocomplete(currName);
var a = places.getPlace();
if (a == null) {
alert('Please Select a valid location');
}
else { }
var currId = $(this).attr("id");
$(this).attr("id", currId.replace(/\[(.*?)\]/, '[' + index + ']'));
});
var numberSpan = $(this).find("span.taskNumber");
numberSpan.html(index + 1);
index++;
});
}
just made my own bbcodes plugin for textarea
but i wasn`t able to correct the error..
If the page uses 2 textareas, in 1st one actions are dublicated twice.
If the page uses 1 textarea, everything is ok.
How to fix it?
code:
/*
* plugin: bbcodes based on jquery.bbcode.js
* version: 0.2
*
* author: atomos
* site: http://light-engine.ru
*/
(function($){
$.fn.bbcode = function(options){
var options = $.extend({
tag_bold: true,
tag_italic: true,
tag_right: true,
tag_center: true,
tag_left: true,
tag_link: true,
tag_image: true,
image_url: 'bbimage/'
}, options||{});
var taid = $(this).attr('name');
var text = '<div class="btn-group">';
if(options.tag_bold)
{
text = text + '<a class="btn" title="Жирный" href="#" id="b"><i class="icon-bold"></i></a>';
}
if(options.tag_italic)
{
text = text + '<a class="btn" title="Курсив" href="#" id="i"><i class="icon-italic"></i></a>';
}
text = text + '</div><div class="btn-group">';
if(options.tag_right)
{
text = text + '<a class="btn" title="Направо" href="#" id="right"><i class="icon-align-right"></i></a>';
}
if(options.tag_center)
{
text = text + '<a class="btn" title="Центр" href="#" id="center"><i class="icon-align-center"></i></a>';
}
if(options.tag_left)
{
text = text + '<a class="btn" title="Налево" href="#" id="left"><i class="icon-align-left"></i></a>';
}
text = text + '</div><div class="btn-group">';
if(options.tag_link)
{
text = text + '<a class="btn" title="Ссылка" href="#" id="url"><i class="icon-share-alt"></i></a>';
}
if(options.tag_image)
{
text = text + '<a class="btn" title="Изображение" href="#" id="img"><i class="icon-picture"></i></a>';
}
text = text + '</div>';
$(this).wrap('<div id="bbcode-' + taid + '"></div>');
$('#bbcode-' + taid).prepend('<div class="btn-toolbar">' + text + '</div>');
$('.controls a[class=btn]').click(function()
{
var id = $(this).parent('.btn-group').parent('.btn-toolbar').parent().attr('id');
var area = $('textarea[name=' + id.substring(7) + ']').get(0);
var button_id = $(this).attr('id');
var param = '';
var start = '[' + button_id + ']';
var end = '[/' + button_id + ']';
if (button_id == 'img')
{
param = prompt('Введите адрес картинки:', 'http://');
if (param && param != 'http://') start += param;
else return false;
}
else if (button_id == 'url')
{
param = prompt('Введите адрес ссылки:', 'http://');
if (param && param != 'http://') start = '[url href=' + param + ']';
else return false;
}
insert(start, end, area);
return false;
});
}
function insert(start, end, element)
{
if (document.selection)
{
element.focus();
sel = document.selection.createRange();
sel.text = start + sel.text + end;
}
else if (element.selectionStart || element.selectionStart == '0')
{
element.focus();
var startPos = element.selectionStart;
var endPos = element.selectionEnd;
element.value = element.value.substring(0, startPos) + start + element.value.substring(startPos, endPos) + end + element.value.substring(endPos, element.value.length);
}
else
{
element.value += start + end;
}
}
})(jQuery);
i have demo: here
Your problem is this:
$(document).ready(function(){
$('textarea').each(function() {
$(this).bbcode();
});
});
That means that your script is going trough every textareas on the page and run bbcode() function on them.
For some reason it iterates trough the first textarea as many times as there are textareas on page.
So if you have 2 areas function will be executed 2 times on first area 1 time on second.
If you have 3 areas function will be executed 3 times on first, 2 times on second and 1 time on last one.
And so on...
I would suggest to heavily adjust your script so that you can forward an ID parameter of specific textarea that you wish to manipulate when you do an onclick event on osme of bbcode buttons like:
<textarea class="input-xxlarge" id="area_1" rows="3"></textarea>
<a onclick="$('#area_1').bbcode();" class="btn" title="Жирный" href="#" id="b"><i class="icon-bold"></i></a>
This is only a tip in which direction you should go... And also consider not doing it with jquery instead do it in pure JS it is much cleaner and on the end you will know every bit of your code. So that future maintaining of script would be fast and easy.
I have found various examples of using jquery to wrap selected text from a textarea in html tags, but I would like to adapt this slightly to create a list when multiple lines of text are selected.
Currently the code below wraps the whole selection in the list tags but I would also like to replace all the carriage returns with the closing and opening tags for list items - so each line in the text area is a new list item.
I think one of the problems might be that the .val function reads the text area as a single line.
jquery:
function listText(elementID, openTag, closeTag) {
var textArea = $('#' + elementID);
var len = textArea.val().length;
var start = textArea[0].selectionStart;
var end = textArea[0].selectionEnd;
var selectedText = textArea.val().substring(start, end);
var replacement = openTag + selectedText + closeTag;
textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, len));
}
$(document).ready(function () {
$("#BoldIt").click( function() {
listText("markItUp", "<ul><li>", "</li></ul>");
});
});
body:
<textarea id="markItUp" cols="80" rows="20"></textarea>
<br />
<input type="button" value="Bold" id="BoldIt" />
split your text like this:
function listText(elementID, openTag, closeTag) {
var textArea = $('#' + elementID);
var s = "\n";
var len = textArea.val().length;
var start = textArea[0].selectionStart;
var end = textArea[0].selectionEnd;
var selectedText = textArea.val().substring(start, end);
var replacement = "";
var rows = selectedText.substring(start, end).split(s);
for(var i = 0; i < rows.length; i++) {
replacement += openTag + rows[i] + closeTag + s;
}
textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, len));
}
$(document).ready(function () {
$("#BoldIt").click( function() {
listText("markItUp", "<ul><li>", "</li></ul>");
});
});
I have a webpage/form with multiple tinymce instances and setup to respond with count of words/characters. everything works fine but could not get the display of word/character count on page load with initial content. here is my setup portion in tinymce setup.
setup: function(ed) {
var text = '';
var wordcount = false;
ed.onKeyUp.add(function(ed, e) {
var contents = new Object();
for(i=0; i < tinyMCE.editors.length; i++){
if (tinyMCE.editors[i].getContent())
contents[i] = tinyMCE.editors[i].getContent();
text = contents[i].replace(/(<([^>]+)>)/g,'').replace(/\s+/g,' ');
text = $.trim(text);
$('#' + tinyMCE.editors[i].id + '_path_row').text(text.split(' ').length + ' words, ' + text.length + ' characters.');
}
}
}
Now the part i am struggling is how to trigger key up when the page is displayed with initial content so that it displays word/character count.
I tried $('#' + tinyMCE.editor(0).id + '_ifr').keyup(); and $('#textarea1').keyup(); but no use.
Can some one help me to get it right?
Add this to your setup:
ed.onInit.add(function(ed) {ed.onKeyUp.dispatch();});
Doc: http://tinymce.moxiecode.com/wiki.php/API3:class.tinymce.util.Dispatcher
After:
tinymce.init
you place the code:
init_instance_callback: function(editor) {
editor.on('keyUp', function(e) {
observa_boton_ir_paso1();
});
}
There was a character missing. Try this (works at elast in my browser FF 3.6.17)
setup: function(ed) {
var text = '';
var wordcount = false;
ed.onKeyUp.add(function(ed, e) {
var contents = new Object();
for(i=0; i < tinyMCE.editors.length; i++){
if (tinyMCE.editors[i].getContent())
contents[i] = tinyMCE.editors[i].getContent();
text = contents[i].replace(/(<([^>]+)>)/g,'').replace(/\s+/g,' ');
text = $.trim(text);
$('#' + tinyMCE.editors[i].id + '_path_row').text(text.split(' ').length + ' words, ' + text.length + ' characters.');
}
});
}
How do I edit the selected text of a textarea form element?
EDIT: as in edit it in-place, replacing the orignal text.
This works:
function replaceIt(txtarea, newtxt) {
$(txtarea).val(
$(txtarea).val().substring(0, txtarea.selectionStart)+
newtxt+
$(txtarea).val().substring(txtarea.selectionEnd)
);
}
$("button").on('click', function() {
replaceIt($('textarea')[0], 'fun')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea>Hello world.</textarea>
<button>Replace with fun</button>
I found this:
function wrapText(elementID, openTag, closeTag) {
var textArea = $('#' + elementID);
var len = textArea.val().length;
var start = textArea[0].selectionStart;
var end = textArea[0].selectionEnd;
var selectedText = textArea.val().substring(start, end);
var replacement = openTag + selectedText + closeTag;
textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, len));
}
$('button').on('click', function() {
wrapText('test', '<b>', '</b>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="test">This is a test</textarea>
<button>Surround with <b> tag</button>
But personaly its not working with content-editable divs.