This question already has answers here:
Encode URL in JavaScript
(22 answers)
Closed 13 days ago.
so I'm hoping someone can help. I have a text field on my page which is pulling a variable in from Active Campaign which is the company name, and turning it into a URL on my page:
https://www.vitaldocuments.co.uk/referral-link/?company=%COMPANY%
However, as you can see the variable being pulled in will have spaces in, which is fine in that it's a workable link if they copy and past it, as it will automatically add in %20 into the spaces, but I want these to be added within the text box itself so it shows it as the actual URL here. Is this possible?
Here's the code I'm using:
<script>
document.querySelectorAll(".copy-link").forEach((copyLinkParent) => {
const inputField = copyLinkParent.querySelector(".copy-link-input");
const copyButton = copyLinkParent.querySelector(".copy-link-button");
const text = inputField.value;
inputField.addEventListener("focus", () => inputField.select());
copyButton.addEventListener("click", () => {
inputField.select();
navigator.clipboard.writeText(text);
inputField.value = "Copied!";
setTimeout(() => (inputField.value = text), 2000);
});
});
</script>
-->
I've tried the script as is, but it hasn't worked out right.
I believe You can simply use the encodeURI()
method and apply it to the string of your text field
DOM values don't react try this:
document.querySelectorAll(".copy-link").forEach((copyLinkParent) => {
const inputField = copyLinkParent.querySelector(".copy-link-input");
const copyButton = copyLinkParent.querySelector(".copy-link-button");
- const text = inputField.value;
inputField.addEventListener("focus", () => inputField.select());
copyButton.addEventListener("click", () => {
+ const text = inputField.value;
inputField.select();
navigator.clipboard.writeText(text);
inputField.value = "Copied!";
setTimeout(() => (inputField.value = text), 2000);
});
});
Note: i'm pretty sure the copy button won't work on mobile you need a different code but that's beyond the scope of this question
Related
This question already has answers here:
What is the JavaScript string newline character?
(15 answers)
Closed 6 months ago.
I want to send a whatsapp message using this code below, but I don't know how to add line breaks in the message. I tried using \n but it still appears as 1 line.
the function
export function sendWhatsApp(phone='', msg='') {
let phoneWithCountryCode = `62${ltrim(phone, '0')}`; // 628123456789
let mobile = `+${phoneWithCountryCode}`;
let url = `whatsapp://send?phone=${mobile}&text=${msg}`;
Linking.openURL(url).then((data) => {
console.log('WhatsApp Opened');
}).catch(() => {
alert('Please make sure WhatsApp installed on your device');
});
}
// end export function sendWhatsApp
how I call the function
let msg = `Hello \n
This is first line of message \n
this is the second line`
;
sendWhatsApp('8123456789', msg);
Use "\r\n", it will work.
I have an emoji picker and a textarea. When the user picks an emoji it should be inserted where the cursor currently is located. I need to maintain the cursor position so that the user can add more emojis where the cursor was before.
I can able to place the emojis where the cursor is located, But not able to maintain the cursor after the emoji is inserted.it should ideally be placed next after the character is inserted.
So far I have this
addEmoji (emoji) {
const textarea = this.$refs.textarea
const cursorPosition = textarea.selectionEnd
const start = this.content.substring(0, textarea.selectionStart)
const end = this.content.substring(textarea.selectionStart)
const text = start + emoji.native + end
this.content=text;
textarea.focus()
this.$nextTick(() => {
textarea.selectionEnd = cursorPosition + emoji.native.length
})
}
This is a Vue js snippet. Please Help.
Finally, I fix this myself, Posting an answer,so it may help someone facing the same issue
addEmoji (emoji) {
const textarea = this.$refs.contenteditor
const cursorPosition = textarea.selectionEnd
const start = this.content.substring(0, textarea.selectionStart)
const end = this.content.substring(textarea.selectionStart)
const text = start + emoji.native + end
this.content=text;
textarea.focus()
setTimeout(() => {textarea.selectionStart=textarea.selectionEnd = cursorPosition + emoji.native.length},50);
this.show_emoji_picker=false;
},
For some reason, I can't make this work using this.$nextTick.so I use
setTimeout instead.The above code works fine for me in vue js.
I found another way starting with user4206843 answer:
Textarea
<textarea ref="commentTextarea"></textarea>
Ref
const commentTextarea = ref();
Method
const emojiClick = (emoji) => {
// insert emoji at cursor position
const cursorPosition = commentTextarea.value.selectionStart;
const text = commentTextarea.value.value;
const before = text.substring(0, cursorPosition);
const after = text.substring(cursorPosition, text.length);
commentTextarea.value.value = before + emoji + after;
commentTextarea.value.focus();
};
This question already has answers here:
Rendering raw html with reactjs
(13 answers)
Closed 1 year ago.
I have a text input. I want the line breaks that the user creates to be included in the output text.
When the user clicks preview, the input value is stored in state as a string. I use .replace() to replace the line breaks with br, but the tags are visible in the output html.
DesPreviewRender = () => {
const desStateCopyOutput = this.state.inputValues.desValue.replace(/(?:\r\n|\r|\n)/g, ' <br> ');
return (
<FadeIn>
<div className="desPreview--Temp">
<p className="desPreviewValueText--Temp">
{desStateCopyOutput}
</p>
</div>
</FadeIn>
)
}
Here's a screenshot of the output:
Screenshot of html output
Thanks!
You could do the following (maybe not the best way, but it works):
generateOutput = input => {
const lines = input.split('\n')
const output = []
lines.forEach((d, i) => {
if (i > 0) {
output.push(<br/>)
}
output.push(d)
})
return output
}
As SuperDJ said, I can use dangerouslySetInnerHTML to do this. Thanks!
I need to add formatting to my inputBox suited for currency, it should look like this: £000,000.000.
This what my script currently looks like:
var elDeliveryPrice = document.getElementById('deliveryPrice');
var elOrderValue = document.getElementById('orderValue');
var formatter = new Intl.NumberFormat('gb-GB', { style: 'currency', currency: 'GBP' });
elOrderValue.addEventListener('keyup', _ => {
let curVal = elOrderValue.value;
let curValFloat = parseFloat(curVal);
if (isNaN(curValFloat)) {
elDeliveryPrice.innerHTML = '';
return;
}
elDeliveryPrice.innerHTML = formatter.format((curValFloat * 0.025) + 4);
});
Here's what the elements look like. Check out what it looks like on the live site. This script currently shows the inputted number value on keyup with an added formula to show a price that's relative to the input value on a separate div block, with currency formatting only on the output. How would I modify this code to add formatting to the inputBox whilst a user is typing? Thanks.
I'm not an UX expert, but from my experiences I can tell you you shouldn't do it as long as the cursor is inside the textfield. Formatting the input while the user is still typing creates a lot of frustration and "weird" behaviour for the user (jumping cursor, suddenly special characters appear, etc.). Maybe it's fine to format it back and forth when the input gains and looses focus.
However, to do it regardless what people think about your page and it's usability: Assign the formatted text to the value property of the input:
var elDeliveryPrice = document.getElementById('deliveryPrice');
var elOrderValue = document.getElementById('orderValue');
var formatter = new Intl.NumberFormat('gb-GB', { style: 'currency', currency: 'GBP' });
elOrderValue.addEventListener('keyup', _ => {
let curVal = elOrderValue.value;
let curValFloat = parseFloat(curVal);
if (isNaN(curValFloat)) {
elDeliveryPrice.innerHTML = '';
return;
}
elOrderValue.value = formatter.format((curValFloat * 0.025) + 4); // <-- this line
});
Be warned: It will most certainly result in bugs/strange behaviour/whatever.
When I move from searching to the desired word in textarea where there is a large text, I already have the first index of this word and the last index.With this I do setSelectionRange (firstIndex, lastIndex) and focus ().
But the problem is that automatic scrolling to this word does not work and you need to scroll manually to see the highlighted word. How to solve this?
ngOnInit() {
const subscription = this.pageService.subject.subscribe(
r => {
setTimeout(() => {
this.textareaNovel.nativeElement.focus();
const firstIndex = this.pageService.allIndex[this.pageService.indexOfOne];
const lastIndex = firstIndex + this.pageService.inputSearchText.length;
this.textareaNovel.nativeElement.setSelectionRange(firstIndex,lastIndex);
}, 100);
},
e => console.error(e),
() => console.info("completed")
);
}
var objDiv = document.getElementById("divExample");
objDiv.scrollTop = 50
You can use this to scroll wherever you would like, if you can find the text position you can just plug it in. Hope this helps :)