How to display the text as hyperlink if the user entered in the text box...
For example if the user entered the text as
"my website name is google.com"...and submit it,
i have to show that text as "my website name is google.com"
Is there any plugin available for this or any simple script is enough?
function replaceURLWithHTMLLinks(text) {
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/ig;
return text.replace(exp,"<a href='$1'>$1</a>");
}
Thanks to:
How to replace plain URLs with links?
This is usually called "linkify" which I guess is a bit difficult to Google for if you don't know that.
Here is a jQuery plugin that will do this for you.
Related
I am struggling with this and can't get it to work. I am using jQuery to click on a link that will open me a prompt. In this prompt, I want the user to add a URL to link it to some other websites. That works fine, but I can't get the value of the prompt to be shown properly in the input field.
The error I am getting after adding my text in the prompt is the fact
that it outputs it like [Object object].
I do know how to do this in plain JS, but not in jQuery and I need jQuery.
This is my code:
$(".html-button").on("click", function () {
var urls = prompt("Add a link", "http://");
var setText = $("#post-text").val().append('<a href="'+ urls + '"</a>');
// Adding prompt text into my input field
$("#post-text").val(setText);
});
I thought I could do this by using append instead of innerHTML, which I would use in plain JS... Can someone help please?
PS: preferably I would not want to output the anchor already in my input field, but only after submitting the post, but this is a nice to have.
Edit: Fiddle link
You seem to have mixed up some variables here. You are assigning the value of the prompt response to var urls, but then expecting it to be in an undefined var person (guessing you've used the example for this from the W3 Schools Tutorial (https://www.w3schools.com/jsref/met_win_prompt.asp)).
Assuming that your input element has an id of post-text - then you would do this:
$("#post-text").val(urls);
I am working on the assumption here that you're writing the URL into an input field, as you suggest. If you want those a tags in the input field as well then it would be:
$("#post-text").val('<a href="' + urls + '"</a>');
If your intention is to output it as a link somewhere including the HTML 'a' tags so it can be clicked, then you'd need to append it to an appropriate element (not a input field) in the right place in the DOM/on the page.
Lastly, if you want to write the value into the field after the form as been submitted (for whatever reason) you could either store it in a variable and write it on submit, or perhaps in a hidden field. I am unsure why you would want to do this though.
Hope this helps.
I've created a simple online chat room using HTML, JavaScript and CSS. Anyway, I recently added a feature to automatically submit the message upon the enter key being pressed. But whenever I do this, the value of the text box has a new line in it.
Here's an example...
Before submitting a message
document.getElementById("send").value;
""
After submitting a message
document.getElementById("send").value;
"
"
Any help would be appreciated, thanks :)
If you want to completely remove them
var UserInput = document.getElementById("send").value
UserInput = UserInput.replace(/(?:\r\n|\r|\n)/g, '');
The replace function checks the string for returns and new lines using a regular expression, when it finds one, it replaces it with "", or nothing.
Hope this helps you
i have developed for my website a tag system, people can add tags. Someone can add a tag in a form by clicking a button. In that form people will be able to add multiple tags, is there a way to to group the tags like on StackOverflow tags or like the email addresses in gmail, with a X to remove it if needed?
Example in the image:
Thanks
You did not mention using jQuery, nevertheless, I am giving you a quick method that you can use.
Create a textbox, and give it 100% width, and ID it with something like "tag_text". Before the textbox, create a DIV and give it an ID, say "tags_container".
Add an keyup (onkeyup for JS) listener and see if the textbox contains the text that matches with your tag requirements.
If yes, create the tag.
$('#tag_text').on('keyup',{},function(e){
if(e.which==8)
{
//Check if the TAB key was pressed
var tag=$('<div class="tag">').appendTo($("#tags_container"));
var tagText=$('<span class="tagtext">').appendTo(tag).text($('#tag_text').val());
var tagIcon=$('<span class="tagremove"').appendTo(tag).text('X');
$(tagIcon).click({},function(e){
$(this).remove();
//Reset the textbox text:
$('#tag_text').val("");
});
}
}
Give appropriate CSS so that tags have different color.
I'm working on a web app. This app has a text box. The user will enter a dollar value into the text box. As the user is typing, I would like to include commas when appropriate. In others, if a user enters "100", the text will appear as entered. However, if the user enters "1000", I would like to automatically convert the text in the text box to show "1,000".
Is there a plugin to help with this? I'm having problems finding one. I'm using Bootstrap.
Thanks!
Hope The below Code will help you
var x=123456524578;
x=x.toString();
var res = x.replace(/\B(?=(\d{3})+(?!\d))/g, ",") ;
alert(res);
follow the below Link
Working Fiddle
now Append the above output to your Textbox or wherever you want.
the logic lies above,how to use the INTERNATIONAL PLACE VALUE SYSTEM
I need a simple script that gives me a button that when clicked will copy the contents of a text input box to the clipboard. Or it could be a script that when you click on the text input box, automatically copies the contents to the clipboard and displays a "Copy" message next to the text input box.
I've seen them all over the web, but can't find the code for one now.
This example uses jQuery:
Assuming an input box with an id of foo, and a button with an id of clickme, here's how I'd do it:
var inputText = "";
$("#clickme").click(function() {
inputText = $("#foo").val();
});
// inputText now has the input box's value
Edit:
After your clarification, I now understand what you are trying to do. Unfortunately, flash 10 broke most of the methods to do this. However, some great people wrote ZeroClipboard, which is fully compatible with flash 10 and makes it really easy to accomplish this task. Their wiki explains usage.