I have a font awesome icon inside an anchor tag and a input type text field. When clicking on that anchor tag i want to show that icon in the input field's model value. Is it possible? Like commenting someone and add some similes with the comment.
Also if submit the form can I store the entire value in the database?
Component HTML -
<div class="stories-content">
<input type="text" [(ngModel)]="inputval">
<a href="javascript:void(0)" (click)="setEmoji()">
<span style="width: 30px; height: 30px;display: block;" class="far fa-grin"></span>
</a>
</div>
Component.ts -
setEmoji(){
this.inputval = //What To do
}
You can do it with cheatsheet of fontawesome. Demo
change font family of input to show icon in input
input{
font-family: "Font Awesome 5 Free";
}
and use cheatsheat code as input value
<div class="stories-content">
<input type="text" [(ngModel)]="inputval">
<a (click)="setEmoji('')">
<i class="fa fa-smile"></i>
</a>
</div>
and if you want to show this in somewhere you need to change its fontfamily also to show icon again
Every Emoji will be associated with one unique Unicode code (Decimal or Hexa Decimal). In Order to use that code, you are supposed to map into the inner HTML value like below.
<div class="stories-content">
<textarea [innerHTML]=inputVal></textarea>
<a href="javascript:void(0)" (click)="setEmoji()">
<span style="width: 30px; height: 30px;display: block;" class="far fa-grin"></span>
</a>
</div>
import { Component } from '#angular/core'
#Component({
selector: 'my-app',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
inputVal = '😂😄';
setEmoji(){
this.inputval = '😄'; //What To do
}
}
you can find the some of the sample emoji codes : https://www.w3schools.com/charsets/ref_emoji_smileys.asp
Related
I was trying to add search icon inside search box here's my code so far :
<div className='search'>
<input
id="quick_search"
className="xs-hide"
name="quick_search"
placeholder="Search by creator, collectible or collection."
type="text"
onChange={(e) => {
changeKey(e);
}}
onKeyDown={keyPress}
value={keyword}
>
<i class="fa fa-search" aria-hidden="true"></i>
</input>
</div>
i face this Error: input is a void element tag and must neither have children nor use dangerouslySetInnerHTML.
can anyone help me with this ? much appreciated !
thanks
React's input element the same as HTML's input element can't have children.
You have to make the icon appear in the input box using CSS, you can't place it as a child.
.form-field {
position: relative;
display: inline-block;
}
.icon {
position: absolute;
right: 0;
}
<div class="form-field">
<input>
<span class="icon">🔍</span>
</div>
Also, you didn't close the <input> tag. It's wrong because every tag in react has to be closed either by using the closing tag </input> or using a self-closing tag <input />
You code should probably look like this:
<div className='search'>
<input
id="quick_search"
className="xs-hide"
name="quick_search"
placeholder="Search by creator, collectible or collection."
type="text"
onChange={(e) => {
changeKey(e);
}}
onKeyDown={keyPress}
value={keyword}
/> {/* <--- notice `/` here */}
<i class="fa fa-search" aria-hidden="true"></i>
</div>
I have a div where there is an input given to user. I have to apply a validation that restrict the user to input 50 words if the input is in English else if it is in "Japanese" then it should allow only 35 words only. So I have to set the validation for these two inputs. Currently restriction is there and it restricts on the basis of Settings of website i.e if website settings is on for English then it will allow 50 words only regardless of what would be the input in "English" or "Japanese". So I want restriction on input rather than is should be based on website settings
Here I want to add some JS code on click event or something like that to make the th:maxlength dynamic so that length can be restrict on the basis of input in "alertmessage" field
$('#alertMessage').on("click", function(e) {
$("#sendMessageDuringThunder").addClass("text-white");
$('#alertMessage').addClass('highlight-input-message');
$('#alertMessageTable').fadeIn().css('display', 'inline-block');
$('.notification-div').removeClass('rounded-bottom');
$('.noti-alert-dismissible').removeClass('rounded-bottom rounded-right');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-inline-class" th:if="${notification.notification=='thunder-alert'}">
<th:block th:with="maxLength=${session.usercontext.getDefaultLanguage()=='en'?50:35}">
<div th:classappend="${notification.currentStatus}?visible:hide" id="alertMessageBlock">
<input id="alert-issued-on" type="hidden" th:attr="issuedOn=${notification.generatedOn}" />
<input id="alertMessage" autocomplete="off" class="d-down-none input-message" th:maxlength="${maxLength}" name="alertMessage" type="text" th:placeholder="#{label.write.message}" />
<i id="sendMsgIP" class="fas fa-spinner fa-lg fa-spin cursor hidden d-down-none px-1"></i>
<i class="fas fa-chevron-circle-right cursor notification-alert-heading-grey d-down-none px-1 fa-lg" id="sendMessageDuringThunder"></i>
</div>
</th:block>
</div>
$(selector).attr(maxlength,value)
In value you can provide actual value.
For Example:
$("#inputID").attr(maxlength,50)
I’m trying to show a hit section from a Algolia Instant Search as simple as a dropdown-item from bootstrap:
one result per line as a <a> link, without images.
But I only get this one:
How can I get the dropdown-item (above) style , One item per line, without that borders and overlapping ?
Code HTML for seachbox:
<form class="form-inline md-form my-0 mr-5 text-white ">
<i class=“fas fa-search white-text” aria-hidden=“true”></i>
<div id=“searchbox” class="text-white "></div>
<div id=“hits” class=“dropdown-menu text-white” ></div>
</form>
Code JS :
search.addWidget(
instantsearch.widgets.searchBox({
container: “#searchbox”,
placeholder: “Search”,
showSubmit: false,
autofocus: false
})
);
search.addWidget(
instantsearch.widgets.hits({
container: "#hits",
templates: {
empty: "None.",
item: function(item) {
return `<a class="dropdown-item" href="/question/${item.id_question}">${item.str_question}</a>`;
}
}
})
);
Without being able to see the inside of <div id=“hits”></div>
I am guessing there is a ul and li
you need to make those display: block
and a few more css properties
probably white-space: pre;
Can you provide the inside html for <div id=“hits”></div>? so we can provide a better answer.
Wanted to have cleave.js to format text input on the fly.
I have 2 text inputs
HTML text input and
also a pop over text input whenever search icon is clicked.
The issue is on popover text input where cleave text formating is not
working.
I believe it could be related to the element hasn't exist somehow? I have try to listen to listener but no luck so far. .on('shown.bs.popover)
My code as as per below
https://jsfiddle.net/fairul82/y3kf92oq/
Libraries used : cleave,js , bootstrap popover , jquery
HTML
<div class="container">
<h3>Bootstrap 3 Popover HTML Example</h3>
<input type="text" class="input-element"><br>
<ul class="list-unstyled">
<li><a data-placement="bottom" data-toggle="popover" data-
container="body" data-placement="left" type="button" data-html="true"
href="#" id="login"><span class="glyphicon glyphicon-search" style="margin:3px 0 0 0"></span></a></li>
<div id="popover-content" class="hide">
<form class="form-inline" role="form">
<div class="form-group">
<h1>
My Content
</h1>
<input type="text" class="input-element"><br>
</div>
</form>
</div>
//JS
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
$("[data-toggle=popover]").on('shown.bs.popover', function() {
// alert('called back');
const cleave = new Cleave('.input-element', {
numeral: true,
numeralThousandsGroupStyle: 'thousand'
});
});
const cleave = new Cleave('.input-element', {
numeral: true,
numeralThousandsGroupStyle: 'thousand'
});
Here is solution https://jsfiddle.net/ztkv8w60/19/
According to authority document https://github.com/nosir/cleave.js, it has a note .input-element here is a unique DOM element. If you want to apply Cleave for multiple elements, you need to give different css selectors and apply to each of them.
It is tricky question, because the bootstrap popover creates the same element as your specific div when the icon gets a click. Therefore there are two the same element, you have to point it out which element is in a popover.
I have this anchor tag defined:
<a ng-disabled='placeOrderDisabled()' href='#Url.Action("Order","ShoppingCart")?deliveryMethod={{deliveryMethod}}' class="btn btn-primary">
{{ placeOrderButtonText }} <i class="fa fa-chevron-right"></i>
</a>
In Firefox and Chrome, the anchor tag is still clickable though, and I understand from other answers that this is by design, and I need to use a button instead.
Please advise how I need to refactor the above code to use a button element since the button element cannot have the href attribute.
You could try this:
<button class="btn btn-primary" ng-disabled="placeOrderDisabled()" ng-click="clickFn()">
<i class="fa fa-chevron-right"></i>
</button>
on JS file. I assume #Url.Action is object function inside the controller.
$scope.clickFn = function () {
var url = $scope.Url.Action('Order','ShoppingCart') + '?deliveryMethod=' + $scope.deliveryMethod;
window.location.href = url;
}
Don't refactor your code. You can still achieve the disabled behavior with the anchor tag using the CSS.
a.disabled, a[disabled] {
pointer-events: none;
}
From the docs:
The CSS property pointer-events allows authors to control under what
circumstances (if any) a particular graphic element can become the
target of mouse events. When this property is unspecified, the same
characteristics of the visiblePainted value apply to SVG content.
See a working example below:
var app = angular.module("sa", []);
a.disabled,
a[disabled] {
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div ng-app="sa" ng-init="disableButton = false">
<a ng-disabled='disableButton' href="" class="btn btn-primary">
I'm an anchor button <i class="fa fa-chevron-right"></i>
</a>
Disable the anchor button
</div>