Here is the UI scenario I'm trying to develop:
There is a text box field below which there are two buttons. On clicking the first button , there will be a popup in which the user will have to add a IP address. On pressing submit on the popup , the IP address will be displayed in the text area. The user can keep on adding IP addresses, which will be visible on the text area in different lines.
The user should be able to select a particular IP address from the box and delete it using the second button.
The user should not be able to enter data directly into the text field. Any ideas ?
I would suggest you keep clear of using a <textarea> since this involves sniffing selections etc. Instead, use simple container elements (e.g., <li>s in a <ul>/<ol> cf. #David Thomas' comment) to hold the entered IP addresses (one each).
I trust you'll get the idea from this JsFiddle.
HTML
<ul id="addresses"></ul>
<hr />
Add...
JS (Assuming jQuery. You would need some framework to handle selections too.)
var deleteHandler = function() {
$(this).parent().remove();
}
$("#add").click(function() {
var ip = prompt("Enter IP:");
if (ip) {
var $deleteIp = $("<a />", {"class": "delete"})
.text("X")
.click(deleteHandler);
$("<li />")
.text(ip)
.append($deleteIp)
.appendTo("#addresses");
}
return false;
});
Just a demo — deemed to be a candidate for improvements :)
Related
how to make an input like on the google site? I need that after entering the texts and in the input, Google opens with the desired request.
on JAVASCRIPT
google's input
1
2
my input(html)
<input class="finder" type="search" placeholder="Search in Google">
You can add an event listener to let's say a button.
When that button is clicked, the value in your search field will be added to the end of a Google search link.
However, since you can expect people to type sentences (and urls don't use spaces), you can use replace() to replace all spaces with, in our case, a + (url format for spaces is %20, but spaces in queries are commonly replaced with a + character).
Lastly, you can use window.open(), to open a new window that uses our link.
UPDATE: You can use a keypress as a trigger for the eventlistener, and then check if the entered key is an "Enter", that way you don't need a button.
Here's an example:
SEARCH_GOOGLE_VALUE is the textfield the user can type
const SEARCH_GOOGLE_VALUE = document.getElementById('SEARCH_GOOGLE_VALUE');
SEARCH_GOOGLE_VALUE.addEventListener("keypress", (keyboard) => {
if (keyboard.key == "Enter") {
let value = SEARCH_GOOGLE_VALUE.value;
value = value.replace(' ', '+');
let link = "https://www.google.com/search?q=" + value;
window.open(link);
}
});
if you mean redirect to a google page after input this would work
document.querySelector('.finder').addEventListener('focusout',function(){
location.replace("https://www.google.com/search?q=" + document.querySelector('.finder').textContent);
});
this will send the user to a google page with the needed requests when they leave the input fild
if you need to make something simular but on your oun website the best option would be to send the user to a nother page with the query data in the url and some back end to construct and return a needed page.
or you could send a fetch and get info back on focus out
I'm trying to get the contents from a TinyMCE textarea to populate a button/div as I type. This is to show the client how the button/div will look like when it goes live. Everything else works dynamically, such as the button/div colour, the title and dropdown.
The issue lies with dynamically retrieving the contents from TinyMCE. If I use a standard textarea box it works fine. I want the client to be able to use some of the basic features of TinyMCE.
Kind of how this form field is working. As I'm typing in this box, I can see my text updating below.
My JS is:
$(document).on('change', '#ParentID', function() {
var NTxt = $('#ParentID option:selected').text();
var NVal = document.getElementById("ParentID").value;
NTxt = NTxt.replace(/ # /g,"<br/>");
if(NVal != "0"){
if(NTxt.value != null || NTxt.value != "0" || NTxt.value != undefined){
$("#LTxt").html(NTxt);
}
}else{
$("#LTxt").html('External Link Text/Quote Text');
}
});
$(document).on('keyup', '#Opt2', function() {
$('#LTxt').text($(this).val());
});
Here are some screen grabs:
1. Normal State:
2. Populated title and dropdown "internal link" text:
3. Textarea, populating same place (WITHOUT TINYMCE):
Anyone know how I can do this with TinyMCE? I've tried...
tinymce.get('content id').getContent()
...but it didn't seem to populate dynamically.
This is the key question: How to pass anything typed into the TinyMCE textarea into the button, at the bottom, as the user is typing?
Many thanks in advance,
Glynn
You need to use a variety of events that TinyMCE triggers to know when its content has changed. You can then grab the content from the editor and do whatever you need with it.
Here is an example that shows the actual raw HTML in a neighboring DIV. It can easily be adapted to insert the HTML into an elements so its actually rendered to the page.
http://fiddle.tinymce.com/Gegaab/5
The list of available events is documented here: https://www.tinymce.com/docs/advanced/events/#editorevents
The example uses the keydown and change events in particular but there are many to choose from if those don't fit your needs.
Im just wondering how I go about catching the event when the user is typing into a text input field on my web application.
Scenario is, I have a contacts listing grid. At the top of the form the user can type the name of the contact they are trying to find. Once there is more than 1 character in the text input I want to start searching for contacts in the system which contain those characters entered by the user. As they keep typing the data changes.
All it is really is a simple type ahead type functionality (or autocomplete) but I want to fire off data in a different control.
I can get the text out of the input once the input has lost focus fine, but this doesnt fit the situation.
Any ideas?
Thanks
Use the keyup event to capture the value as the user types, and do whatever it is you do to search for that value :
$('input').on('keyup', function() {
if (this.value.length > 1) {
// do search for this.value here
}
});
Another option would be the input event, that catches any input, from keys, pasting etc.
Why not use the HTML oninput event?
<input type="text" oninput="searchContacts()">
I would use the 'input' and 'propertychange' events. They fire on cut and paste via the mouse as well.
Also, consider debouncing your event handler so that fast typists are not penalized by many DOM refreshes.
see my try:
you should put .combo after every .input classes.
.input is a textbox and .combo is a div
$(".input").keyup(function(){
var val = this.value;
if (val.length > 1) {
//you search method...
}
if (data) $(this).next(".combo").html(data).fadeIn(); else $(this).next(".combo").hide().html("");
});
$(".input").blur(function(){
$(this).next(".combo").hide();
});
What I am trying to achieve is to force a textbox to start with a prefix ( country telephone code ) and to make this permanent, meaning that the user cannot bypass this. For example, the Phone textbox should always start with "+45" and after that the user can add the phone number. How to prevent it from deleting the code, by any means?
What I done so far, using jQuery:
//attach event on phone text boxes
$(document).delegate(".phone", "keyup", function(event){
var target = $(this);
var value = target.val().trim();
if (value.indexOf(CONSTANTS.DANISH_PHONE_CODE) == -1) {
//country code not found
//if the user starts deleting the country code
if (value.indexOf("+") == 0){
value = "";
}
//if the user types something in front of the country code, put the country code at the end
value = value.replace(CONSTANTS.DANISH_PHONE_CODE, "");
//phone doesn't start with +45
value = CONSTANTS.DANISH_PHONE_CODE + value;
target.val(value);
}
});
But the problem is that the user can delete the plus sign and the prefix is put automatically at the start so we will have +4545. Do you know an elegant way of achieving this? Thanks.
You can absolutely position the text (in a span) over the textbox and add a left-margin to it.
This way users won't be able to remove it. But you'll have to add it server side.
Add the +45 as static html before the field. Required the user to enter "the rest" of the number (not the +45).
If necessary, add the +45 server side before persisting the value. Similarly, remove the +45 when editing.
JSFiddle Example
This should actively keep them from deleting "+45" instead of trying to fix the problem after the user as changed it. Upon keypress, determine character position, if the position is too early in the string (i.e. inside the "+45" as oppose to after it) then don't allow the keypress, unless that key is the left or right arrow keys.
Acquired resources:
http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea
Binding arrow keys in JS/jQuery
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