If a text input tag is placed inside an anchor, then in Firefox (on Windows) it is not possible to manipulate text inside the text box — text cursor doesn't change its position, and it is not possible to select the text. In Chrome you can change cursor position, but not select the text.
In some cases we can set the parent to be something else than anchor, yet is there a way to avoid this behaviour in general?
Here's the HTML code:
<p>No text select in FF:</p>
<a href="#">
<input type="text" value="7777" />
</a>
<p>Working text select in FF:</p>
<span>
<input type="text" value="8888" />
</span>
And the fiddle.
You can remove the href attribute when the input element is focused. As long as there is no href attribute, you will be able to select text inside the input field (tested in safari, chrome and firefox).
<a href="http://www.google.de" id="link">
link
<input type="text" id="input">
</a>
(function () {
var link = document.getElementById('link');
var input = document.getElementById('input');
var saveHref = null;
input.addEventListener('focusin', function () {
savedHref = link.href;
link.removeAttribute('href');
});
input.addEventListener('focusout', function () {
link.href = savedHref;
savedHref = null;
});
})();
Working example:
http://codepen.io/jjd/pen/JYwLVr
its because of the implementation error in browser.
actualy when we clicking browser it will look for the type of object
in this way
1.is this a link
2.is this any other type( input area,image,
why it first checking for type "link"
because clickig is firstly implemented for opening links,
anf its main usage is for open links
it detect first it as a link then it will call the
. openlink(example) function
Related
I have a problem with my HTML-Website.
I would like to have a text field which generates a link after entering and pressing a button from the input. For example, in the text field is "development" and by pressing the button should my browser go to "www.laurensk.at/development".
I don´t have the code for that...
I've understood your question, you can do it using JQuery or Javascript
$("#btnGoto").click(function(){
window.location="www.laurensk.at/"+$("#txtPage").val();
});
I hope this will help you.
You can use the addEventListenerfunction to generate the link when there is a new input in the field.
Example:
var path = document.getElementById("path")
var link = document.getElementById("link")
function makeLink() {
link.href = "http://my.web.site/" + path.value
link.innerHTML = "http://my.web.site/" + path.value
}
path.addEventListener("keyup", makeLink)
<input id="path"/>
<br>
<a id="link" target="_blank"></a>
Documentation: EventTarget.addEventListener() - Web APIs | MDN
Is it possible to style the value in the attribute ngModel of an input tag?
Example:
<input class="input" type="text" [(ngModel)] = "myService.text">
Let's say the value of text is '28 packages', can I put 28 in bold?
So if i understand correctly you want to have it bold whenever the value is 28 ?
yes its possible you can use a ng-class with a ternary expression like this
.bold{
font-weight:600;
}
<input type="text" ng-class="myService.text == '28 ? 'bold' : '''" class="input" ng-model="myService.text" />
This is not angular-related rather a CSS related question.
You cannot style only a part of an input in HTML/CSS so you won't be able to do it in angular.
Instead, you can use an input that is hidden behind a div. The idea is that when the user clicks the div, you actually focus the input. When the user types text, you capture the content of the input and fill the div with it, eventually adding <span class"highlight"> around the number of packages.
I prepared you a stackblitz in pure CSS/JS. You can adapt it in angular if you want.
Relevant pieces of code :
HTML :
<span id="hiddenSpan">This is the hidden div. Click it and start typing</span>
<div>
<label for="in">The real input</label>
<input id="in" type="text">
</div>
JS :
const input = document.getElementById('in')
const hiddenSpan = document.getElementById('hiddenSpan')
function onInputChanged() {
let text = input.value
const regex = new RegExp('(\\d+) packages')
let result = regex.exec(text)
if(result) {
hiddenSpan.innerHTML = '<span class="highlight">'+result[1]+'</span> packages'
} else {
hiddenSpan.innerHTML = text
}
}
// Capture keystrokes.
input.addEventListener('keyup', onInputChanged)
// Focus the input when the user clicks the pink div.
hiddenSpan.addEventListener('click', function() {
input.focus()
})
CSS :
#hiddenSpan {
background-color: pink;
}
.highlight {
font-weight: bold;
background-color: greenyellow;
}
Note : the downside is that the blinking caret is not visible anymore. You can take a look at this resource if you want to simulate one.
It is not possible to style certain parts of a text <input> field in bold. However, you can use a contenteditable div instead of a text <input> field. Inside the contenteditable div you can have other HTML tags like <strong> to style certain parts of the text however you like.
I created an Angular directive called contenteditableModel (check out the StackBlitz demo here) and you can use it to perform 2-way binding on a contenteditable element like this:
<div class="input" contenteditable [(contenteditableModel)]="myService.text"></div>
The directive uses regular expressions to automatically check for numbers in the inputted text, and surrounds them in a <strong> tag to make them bold. For example, if you input "28 packages", the innerHTML of the div will be formatted like this (to make "28" bolded):
<strong>28</strong> packages
This is the code used in the directive to perform the formatting:
var inputElement = this.elementRef.nativeElement;
inputElement.innerHTML = inputElement.textContent.replace(/(\d+)/g, "<strong>$1</strong>");
this.change.emit(inputElement.textContent);
You can change the <strong> tag to something else (e.g. <span style="text-decoration: underline"> if you want the text to be underlined instead of bolded).
When performing the formatting, there is an issue where the user's text cursor position will be unexpectedly reset back to the beginning of the contenteditable div. To fix this, I used 2 functions (getOriginalCaretPosition and restoreCaretPosition) to store the user's original cursor position and then restore the position back after the text formatting is performed. These 2 functions are kind of complex and they're not entirely relevant to the OP's question so I will not go into much detail about them here. You can PM me if you want to learn more about them.
I've got a contenteditable span placed inside an <a> tag. I'd like to be able to edit the text inside the span so it is important to:
place the cursor on mouseclick somewhere inside the span
select part of the text inside the span using the mouse
Both does not work in Firefox as soon as there is a href attribute in the hyperlink (which is also needed in my case). There is no problem without this attribute and there are no problems in Chrome.
Please try my example on JSFiddle.
<ul>
<li>
<a href="#">
<span contenteditable="true">PlacingCursorOrTextSelectionInFirefoxImpossible</span>
</a>
</li>
<li>
<a>
<span contenteditable="true">noProblemsHereSoFar</span>
</a>
</li>
</ul>
What you can do to improve the click behaviour is to prevent its propagation like this:
<a href="#">
<span contenteditable="true" onclick="event.stopPropagation();">
PlacingCursorOrTextSelectionInFirefoxImpossible
</span>
</a>
Unfortunately, this only allows to put the cursor inside the span, but it is somewhy put to its beginning, not where one have clicked.
To enable selecting, you need to prevent the dragging behaviour, but it is to be changed for the a element:
<a href="#" draggable="false">
<span contenteditable="true" onclick="event.stopPropagation();">
PlacingCursorOrTextSelectionInFirefoxImpossible
</span>
</a>
But wow, draggable="false" actually fixed the "cursor to beginning" bug! Here's the working example (tested in FF 47): https://jsfiddle.net/8v1ebkfd/4/
This works for me:
prevent click-default inside contenteditables
and for firefox, remove and add href-attribute to prevent placing the cursor at the start of the contenteditable-element
http://jsfiddle.net/uy4q0zcm/1/
// if contenteditable inside a link
document.addEventListener('click', e=>{
if (e.button !== 0) return;
if (e.target.isContentEditable) {
e.preventDefault();
}
if (e.explicitOriginalTarget && e.explicitOriginalTarget.isContentEditable) { // keyboard click firefox
e.preventDefault();
}
});
// prevent (Firefox) placing cursor incorrectly
document.addEventListener('mousedown', e=>{
if (!e.target.isContentEditable) return;
var link = e.target.closest('a');
if (link) {
const href = link.getAttribute('href')
link.removeAttribute('href');
setTimeout(()=>link.setAttribute('href', href))
}
});
i'm doing a goto link in web page, with an input text aside it.
the goto link appear both on top and bottom of webpage.
<div class="gotopage">
goto page<input type="text" class="page_i"/>
Go
</div>
in jquery, i need to get text beside link:
$('a.Goto').live('click',function(){
window.location.href = ...;
});
how to get text value, it shouldn't be id, for id appear twice.
Use prev() to get sibling text input:
$('a.Goto').live('click',function(){
window.location.href = $(this).prev('.page_i').val();
});
Wrap the text in a span tag:
<div class="gotopage">
<span>goto page</span><input type="text" class="page_i"/>
Go
</div>
Then select it
$('a.Goto').live('click',function(){
window.location.href = $(this).closest('span').text();
});
You can get text of an input box by using this code
<script>
$('a.Goto').live('click',function(){
txt=$('.gotopage .page_i').val();
alert(txt);
});
</script>
I'm not a web guy, so this might be something really simple I'm missing, but:
Consider the following page:
http://pastehtml.com/view/1bg9qno.html
Which is basically a list of <input>s, and each input has a helper <span> with text (that will change along with the input's value on keyUp).
So when the list is long enough (like in the above HTML page), if you tab thru the inputs, you will eventually get to the input on the bottom of the page, tab again, and the browser will scroll down to the next input.
In my case, the input has the helper text which is crucial to my app.
The problem is that when the user tabs down to the input that is not visible, the browser only brings that input into the view, and not his entire parent (<div class="item">) which contains the helper text. As a result, this helper text is not visible to the user while he enters stuff in the input.
How can one tell the browser to bring the entire parent into view when focusing the out-of-view input?
Is there any elegant solution?
BTW: This doesn't happen in Chrome, since Chrome always scrolls down a part-page, but it always happens in Firefox which always scrolls as little as possible to the input.
The HTML looks like this:
<body>
<div class="item">
<input type="text" value="text" />
<br />
<span>helper text</span>
</div>
<hr />
...
<hr />
<div class="item">
<input type="text" value="text" />
<br />
<span>helper text</span>
</div>
</body>
<html>
<head>
<script>
function scrollParentIntoView(elem){
setTimeout(function(){
var children = elem.parentNode.children;
var lastChild = children[children.length - 1];
lastChild.scrollIntoView();
elem.parentNode.scrollIntoView();
//elem.ScrollIntoView();
},1);
}
</script>
</head>
<body>
...
<div>
<input onfocus="scrollParentIntoView(this);" />
...
<p>end</p>
</div>
...
</body>
</html>
I've tested on FF and Chrome and seems to do the job - you can see the input and 'end' when each '...' is replaced with a dozen tags
Here is a solution using jQuery. It's based on the height of your item container.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".item input").focus(function() {
var parent = $(this).parent();
// Check if the bottom of the item container is below the viewport
if ($(parent).position().top + $(parent).height() > $(window).scrollTop() + $(window).height())
{
// Adjust the scroll position according to the height of the item container
$(window).scrollTop($(window).scrollTop() + $(parent).height());
}
});
});
</script>
Edit
Here is a demo for you: http://pastehtml.com/view/1bnv1xb.html
This Javascript works in FF 3.6, IE 8, Safari 4, and Chrome 3.1. It doesn't require JQuery, doesn't need setTimeouts, and can be condensed to about 8 lines:
//Collect the elements
var ALL = document.getElementsByTagName("INPUT");
for(x=0;x<ALL.length;x++) {
//Add relative position style to allow offset math
ALL.style.position = 'relative';
ALL[x].onfocus = function() {
//Find scroll offset distance
var temp = this.offsetParent.offsetTop +
this.offsetParent.offsetHeight -
document.documentElement.clientHeight;
//Detect webkit browser and apply scroll offset as appropriate
window.devicePixelRatio ?
document.body.scrollTop = temp :
document.documentElement.scrollTop = temp;
}
}
Of course, the obvious solution here is to put all the important content above the input element, but it's obvious that that won't do for whatever reason, so here's another solution:
Remember that tabindex can be used to allow any element to be focused. This means that we can simply drop a tabindex on the parent of the input elements to allow the entire parent to gain focus and scroll into view.
However, this also means that tab must be tapped twice to get the input element focused. You will also need to explicitly set tabindex on the input element to have them be the next in line to gain focus.
<ol id="input">
<li tabindex="3">
<input type="text" tabindex="5" />
<p>Helper Text</p>
</li>
<li tabindex="7">
<input type="text" tabindex="10" />
<p>Helper Text</p>
</li>
</ol>
You'll also want to give the parent elements a :focus style instead of the rather ugly dotted outline.
See: http://www.jsfiddle.net/F2fwy/2