jquery textfield: show end of text when not in focus - javascript

I see that whenever there is more text than the size of the text field, start of the text gets shown when not on focus. In the picture below, i want to show the end of the text like 1, but when text field is not in focus automatically start of the text is shown. I tried right align (bootstrap text-right) as shown in 3 but that didn't help
Code chunk related to this:
<div class="form-group">
<label for="" class="control-label col-xs-3">Work Space:</label>
<div class="col-xs-6">
<input type="text" class="form-control text-right" id="workspace" placeholder="">
</div>
<div class="col-xs-2">
<button type="button" id="load_files" class="btn btn-info">Load Files</button>
</div>
</div>
Edit:
Just tried this in Mozilla firefox, it works just as i want it to, but doesn't work in chrome

Set the direction CSS property to match the direction of the text you want. rtl or ltr.
input {
direction: rtl;
}
input:focus,
input:active {
direction: ltr;
}
Here's a fiddle demo for you to review. http://jsfiddle.net/yongchuc/on91y1hr/

Related

Bootstrap tags input copy paste value not showing entire value

When the User pastes any value in the tag it's not showing the entire text it shows just the last few words, if typed it works fine.
<div class="col-md-8 col-md-offset-2">
<div class="text-center">
<h1>Bootstrap Tags Input</h1>
</div>
<div class="form-group">
<label for="city_tag">Please write a tag</label>
<input type="text" value="Istanbul, Adana, Adiyaman, Afyon, Agri, Aksaray, Ankara" data-role="tagsinput" class="form-control" />
</div>
</div>
Codepen
Any Suggestions will be helpful
When user pastes any content to add a tag want to show case entire value instead of the last few characters.
The Bootstrap Tags Input creates an input text element inside the container with a size that gets changed while typing text but not when text gets pasted. That's why when you paste text longer than its current size, it will get "cropped" with the caret laying on the last position.
To show the whole text you'd need to change the input element size like the library already does while typing text. If you add a css rule like input{border: solid 1px;} you'll see what I'm talking about.
I made this demo bringing in your code from codepen and adding a js part that will add a paste event listener on document ready that will change the size of the text input also when text gets pasted.
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('.bootstrap-tagsinput input').
addEventListener('paste', (event) => {
let paste = (event.clipboardData || window.clipboardData).getData('text');
const size = event.target.value.length + paste.length;
event.target.setAttribute('size', size);
});
});
body {
background: #fafafa;
padding: 10px;
}
h1 {
margin-top: 0;
}
/*
input{
border: solid 1px !important;
}
*/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>
<body>
<div class="col-md-8 col-md-offset-2">
<div class="text-center">
<h1>Bootstrap Tags Input</h1>
</div>
<div class="form-group">
<label for="city_tag">Please write a tag</label>
<input
type="text"
value="Istanbul, Adana, Adiyaman, Afyon, Agri, Aksaray, Ankara"
data-role="tagsinput"
class="form-control" />
</div>
</div>
</body>

input-group-addon change color with onclick

I am trying to change the input-group-addon background-color with an onclick javascript function. It seems i can not get this working.
Anyone has an idea?
color = the name of the color (for example 'red').
<script type="text/javascript">
function changeColor(color, id) {
document.getElementById('onColor').innerHTML = color;
}
</script>
Below background-color is set to red. How can I get the text echo'ed from the function changeColor instead of the text red? So I can put any color into it I want, and the color changes on the clicked radio button.
<div class="input-group" style="width:100%">
<span class="input-group-addon" style="background-color:red"></span>
<input id="bet" type="number" class="form-control" name="bet" placeholder="Lira">
</div>
EDIT:
Seems style change with javascript is the answer (not innerHTML).
See: Change CSS properties on click
Use document.getElementById(id).style to change element's css , not innerHTML.
<div class="input-group" style="width:100%">
<span id="input-addon" class="input-group-addon"> Span </span>
<input id="bet" type="number" class="form-control" name="bet" placeholder="Lira">
</div>
<button onclick="changeColor('red', 'input-addon')">Change Color</button>
<script type="text/javascript">
function changeColor(color, id) {
document.getElementById(id).style.color = color;
}
</script>

angularjs show div if clicked inside a input field and hide if clicked outside

I want to show my div if user clicks inside the input field, and if clicked outside only, then it should hide it. If clicked inside the field again, it shouldn't hide.
Here is my attempt:
JSFIDDLE LINK
<div ng-app="app">
<div ng-controller="HelpCtrl">
<input type="text" id="myText" name="myText" ng-click="showHelp = ! showHelp">
<div class="details" ng-class="{ 'hidden': ! showHelp }">
<p>
The help text here!
</p>
</div>
</div>
</div>
the problem is that when the page is opened, I see the help text, and it suddenly disappears and when I click inside the field, it shows again, but it disappears only when clicked inside the field again. Now I want it to hide only if clicked outside the field.
Please help me with this.
Use ng-focus instead of ng-click
Plunker Example
<input type="text" ng-focus="focused = true" ng-blur="focused = false" />
<p ng-if="focused">Input has focus!</p>
below code should help you.
<style>
.hidden{
-webkit-transition: width 2s; transition: width 2s;
display:none !important;;
}
.details{
display:block;
}
</style>
<div ng-app="app">
<div ng-controller="HelpCtrl">
<input type="text" id="myText" name="myText" ng-focus="showHelp = true" ng-blur="showHelp = false">
<div class="details" ng-class="{'hidden':!showHelp}">
<p>
The help text here!
</p>
</div>
</div>
</div>

Sencha Touch 2 and .focus() : set cursor into textarea

I want to set a cursor into the textarea with id="mytextarea" when a new View with a textarea appears.
Seems like .focus() should work, but it doesn't. Why?
console.log('this message is displayed');//displayed in console
Ext.getCmp('mytextarea').focus();//nothing happens at the same time
And this is what I have in Chrome:
<div class="x-container x-field-textarea x-field x-label-align-left x-form-label-nowrap x-empty" id="mytextarea">
<div class="x-form-label" id="ext-element-127" style="width: 30% !important;">
<span id="ext-element-128"></span>
</div>
<div class="x-component-outer" id="ext-element-126">
<div class="x-unsized x-field-input sencha-clear-icon" id="ext-textareainput-1">
<textarea id="ext-element-129" class="x-input-el x-form-field x-input-text" type="text" autocapitalize="off" placeholder="Type here...">
</textarea>
<div class="x-field-mask" id="ext-element-130" style="display: none !important;">
</div>
<div class="x-clear-icon" id="ext-element-131">
</div>
</div>
</div>
</div>
Thank you.
I need move cursor to the End of Texarea. Use SenchaTouch 2.3.0 / iOS. I did it set focus to the textfield and set new value soo. when I open popup - textfeld will be focused and caret positon at the end of the text.
var textarea = document.getElementById('note'),
note = textarea.getValue();
textarea.focus();
textarea.setValue('');//without this nothing happend
textarea.setValue(note);

twitter bootstrap ".input-append" not work with popover

When I use input append and popover at the same time then popover not working, but when I remove the appended input (by removing the input-append class) then it works.
Here is my code:
<span class="input-append">
<button class="span2" id="filter" type="text" name="filter" placeholder="Type your filter">itest</button>
<button class="btn" id="filterSubmits">Go</button>
</span>
<script>
jQuery(function() {
$('#filter').attr('data-title', 'Search tips').
attr('data-content', 'Search format: -|+').
attr('data-placement', 'bottom').
attr('data-trigger', 'focus');
$('#filter').popover('show');
})
</script>
Is there something wrong here?
If you take a look at the css for input-append, you'd see that it sets font-size to 0. Adding the following style will fix your issue:
.popover {
font-size: 14px;
}

Categories

Resources