I want to highlight a text inside a text field in EXT js.
I add the text to the text field dynamically like this:
this.getCopyText().setValue('text to be added');
/|\
|
reference
I tried using the focus method but it does not provide the correct effect.
Can this be achieved by any chance?
EDIT: Setting the selectText propertie of focus function to true does not help.
I had a similar problem with highlighting text in textfield in a window on show, for me the issue of the field not getting focus and not being highlighted was solved by defering the focus call like this:
var me = this;
me.on('show', function () {
Ext.defer(function () {
me.getCopyText().focus(true);
}, 1);
}, me)
Related
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]
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());
}
});
I have a form (just one field) which I am populating with some data. I would like to get me Div container populated with the data I put there in a real time. So no refresh, after I type in some text in the form field, I get it in the div as well. Does anybody know how to do it? JQuery, AJAX?Any advice appreciated.
var div = $('div')[0];
$('input').bind('keyup change', function() {
div.innerHTML = this.value;
});
Try it out: http://jsfiddle.net/H6P2z/
Of course you should make the selectors specific to your actual elements.
With jQuery you can do this very easily:
$('#textFieldId').bind('change', function (event, previousText) {
$('#divId').html($(this).val());
});
You could bind an onkeyup event to the input field. When the event fires, you can grab the contents of the field and do what you want with it.
This might look like this:
$(selector).keyup(function(e) {
// find the value of the field
var text = $(this).val();
// do something with it
$(yourDivSelector).html(text);
});
I am using jquery autocomplete combobox
and everything is ok. But I also want to set specific value through JavaScript like $("#value").val("somevalue") and it set to select element, but no changes in input element with autocomplete.
Of course, I can select this input and set value directly, but is it some other ways to do that? I try set bind to this.element like this.element.bind("change", function(){alert(1)}) but it was no effects. And I don't know why.
Edit
I found a workaround for this case. But I don't like it. I have added the following code to _create function for ui.combobox
this.element.bind("change", function() {
input.val( $(select).find("option:selected").text());
});
And when I need to change the value I can use $("#selector").val("specificvalue").trigger("change");
Is this demo what you are looking for?
The link sets the value of the jQuery UI autocomplete to Java. The focus is left on the input so that the normal keyboard events can be used to navigate the options.
Edit: How about adding another function to the combobox like this:
autocomplete : function(value) {
this.element.val(value);
this.input.val(value);
}
and calling it with the value you want to set:
$('#combobox').combobox('autocomplete', 'Java');
Updated demo
I cannot find any available existing function to do what you want, but this seems to work nicely for me. Hope it is closer to the behaviour you require.
I managed a quick and dirty way of setting the value. But, you do need to know both the value and the text of the item that you want to display on the dropdown.
var myValue = foo; // value that you want selected
var myText = bar; // text that you want to display
// You first need to set the value of the (hidden) select list
$('#myCombo').val(myValue);
// ...then you need to set the display text of the actual autocomplete box.
$('#myCombo').siblings('.ui-combobox').find('.ui-autocomplete-input').val(myText);
#andyb,
i think rewrite:
autocomplete: function (value) {
this.element.val(value);
var selected = this.element.children(":selected"),
value = selected.val() ? selected.text() : "";
this.input.val(value);
}
I really like what andyb did, but I needed it to do a little more around event handling to be able to handle triggering the a change event because "selected" doesn't handle when hitting enter or losing focus on the input (hitting tab or mouse click).
As such, using what andyb did as a base as well as the latest version of the jQuery Autocomplete script, I created the following solution: DEMO
Enter: Chooses the first item if menu is visible
Focus Lost: Partial match triggers not found message and clears entry (jQuery UI), but fully typed answer "selects" that value (not case sensative)
How Change method can be utlized:
$("#combobox").combobox({
selected: function (event, ui) {
$("#output").text("Selected Event >>> " + $("#combobox").val());
}
})
.change(function (e) {
$("#output").text("Change Event >>> " + $("#combobox").val());
});
Hopefully this helps others who need additional change event functionality to compensate for gaps that "selected" leaves open.
http://jsfiddle.net/nhJDd/
$(".document").ready(function(){
$("select option:eq(1)").val("someNewVal");
$("select option:eq(1)").text("Another Val");
$("select option:eq(1)").attr('selected', 'selected');
});
here is a working example and jquery, I am assuming you want to change the value of a select, change its text face and also have it selected at page load?
#
Attempt 2:
here is another fiddle: http://jsfiddle.net/HafLW/1/ , do you mean that you select an option, then you want to append that value to the autocomplete of a input area?
$(".document").ready(function(){
someString = "this,that";
$("input").autocomplete({source: someString.split(",")});
$("select").change(function(){
alert($(this).val()+" appended");
someString = someString+","+$(this).val();
$("input").autocomplete({source: someString.split(",")});
});
});