I have question. I used editable plugin in octobercms project. I can't find this in documentation. How can I limit the length of the characters in my content in html. If there is no any way so how can I do this with JavaScript? I tried to use code like this but I am low in JavaScript.
var x = document.getElementById('gallery');
var tekst= x.outerText;
console.log(tekst);
console.log(x.outerText.length);
if (x.outerText.length > 150) {
var trimmedString = tekst.substring(0, 150);
document.getElementById('gallery').outerText = trimmedString;
}
But now this text not use dic and classes and editable. What can I do to fix this?
Maybe you should do it in the HTML instead.
<form action="demo_form.asp">
Username: <input type="text" name="usrname" maxlength="10"><br>
<input type="submit" value="Submit">
</form>
http://www.w3schools.com/tags/att_input_maxlength.asp
you can just put maxlength="10" for maxlength it will stop the cursor for input after 10 characters.
Related
I want to block some special characters from entering in text box.
`~ #$^+|\ []{}<> these are the characters i would like to prevent from user inputting. Can any one suggest a solution or reg ex.
function some(){
var input = document.getElementById('one').value;
var one = input.replace(/[(\\^`~#\$\^\+\|\\\[\]{}<>)]/g,"");
document.getElementById('one').value=one;
}
<input type="text" oninput="some()" id="one" >
<input type="text" pattern="[^`~#\$\^\+\|\\\[\]{}<>]+">
How can I prevent (usign maybe Angular) the user from entering more than 4 numbers in a an simple number like this one :
<input type="number">
I used ng-maxlength, and max attributes, but those attributes as specified by w3.org specs and the official website Angular, do not prevent the user from adding more numbers.
What I want is that the input stops in 4 digits, like adding in somehow a mask or something to it.
Here is a way to do it using JavaScript:
HTML
<input type="number" oninput="checkNumberFieldLength(this);">
JavaScript
function checkNumberFieldLength(elem){
if (elem.value.length > 4) {
elem.value = elem.value.slice(0,4);
}
}
I would also suggest to make use of the min and max HTML attributes for the input Number element, if it applies in your case.
JSFiddle
W3c: input Number
Well, as somebody stated above maxlength doesn't work with inputs of type number, so you can do it this way:
<input type="text" pattern="\d*" maxlength="4">
of course, this will do if it's not a requirement to have input type="number"
Using ng-pattern with a regex
\d : digits
{4} : 4 times
<input type="number" ng-pattern="/^\d{4}$/" />
I would create a function in your controller like this
angular.module("my-app", [])
.controller('my-controller', function($scope) {
$scope.checkInput = function() {
if (input.value.length > 4) {
input.value = input.value.slice(0,4);
}
});
});
Then in your view you can do something like this
<input type="number" max="9999" ng-input="checkInput()" />
Warning: The max attribute will only work for the spinner. The user will still be able to enter numbers higher than that. Here's an example
<input type="number" max="9999" />
You can do that using modernizr and jquery.
I've made an example here: https://jsfiddle.net/5Lv0upnj/
$(function() {
// Check if the browser supports input[type=number]
if (Modernizr.inputtypes.number) {
$('input[type=number]').keypress(function(e) {
var $this = $(this),
maxlength = $this.attr('maxlength'),
length = $this.val().length;
if (length >= maxlength)
e.preventDefault();
});
}
});
I cannot understand where i am going wrong.
Simple Form.
<form name="myForm" method="post" action="" onsubmit="return(validate());">
<fieldset>
<label for="phone">Phone Number </label>
<input type="text" name="phone" size="30"><br><div id="badphone" style="background-color: #A9A9F5;"></div>
</fieldset>
</form>
<script>
function validate()
{
var pattern2=new RegExp("[/^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/]");
if(document.myForm.phone.value.match(pattern2))
{
var badphone = "<strong>Phone Number can only contain Numbers 0-9</strong>";
document.getElementById("badphone").innerHTML = badphone;
document.myForm.phone.focus() ;
return false;
}
}
</script>
I have tried a couple other Regex's to get this to work but no luck.
I am tring to get an output like:
1112223333, 111-222-3333, (111)222-3333, 111 222 3333, 111.222.3333
Currently it is not validating at all.
Your syntax of using regex using RegExp constructor is wrong.
Your regex can be simplified to:
var pattern2 = /^\(?\d{3}\)?[-\s.]?\d{3}[-\s.]?\d{4}$/;
Why are you using the [/ and /] at the start and ending of the RegEx?
Try removing it.
If want to say not in JS try this
if(!document.myForm.phone.value.match(pattern2))
If the what you have is doing the opposite of what you want change the operator.
I have a textbox where the user can enter any number of characters, But I want its width to be increased dynamically with respect to the number of characters entered into it.
I have done a workaround shown below and it works partially, it will increase the width dynamically but not so precisely and will hide the first entered characters after a while because of my poor logic applied in it. I've just given a wild cutoff of 17 characters count to start the increment.
It should start the width increment only if the character count reaches the end of textbox.
UPDATE:
I am looking to make visible all the characters entered in the field, whereas in default the text box hides the leftmost characters.
FIDDLE DEMO
HTML
<input type="text" id="txtbox" />
SCRIPT
$('#txtbox').keypress(function() {
var txtWidth = $(this).width();
var cs = $(this).val().length;
if(cs>17){
$(this).width(txtWidth+5);
}
});
I have tried this code and it works fine.
<html>
<head>
<script type="text/javascript">
function Expand(obj){
if (!obj.savesize) obj.savesize=obj.size;
obj.size=Math.max(obj.savesize,obj.value.length);
}
</script>
</head>
<body>
<form>
<input type="text" size="5" style="font-family:Courier;" onkeyup="Expand(this);">
</form>
</body>
</html>
Be sure to use mono space fonts in text box, otherwise the size attr. and number of characters won't match
Adding a simple inline code in onkeyUp should help
<input type="text" name="fname" onkeypress="this.style.minWidth = ((this.value.length + 1) * 7) + 'px';">
<input type="text" id="txtbox" size="10"/>
$('#txtbox').keypress(function() {
var txtWidth = $(this).attr('size');
var cs = $(this).val().length-6;
txtWidth = parseInt(txtWidth);
if(cs>txtWidth){
$(this).attr('size',txtWidth+5); }
});
You were using width field which is actually meant for type = image.
You can get more info here.
I have used size attribute which is used to set the size of input tag in pixels. When its 1 it can take 6 characters by default hence -6. Hope it helps.
A solution similar to #Tejas', but doesn't require the font to be mono-space:
The trick is to use scrollWidth, which gives us the total string length, even on single-line textboxes without a scrollbar:
https://stackoverflow.com/a/9312727/1869660
NOTE: I couldn't get this to work in IE, where scrollWidth always returned 2 for some reason..
Some code:
function expand(textbox) {
if (!textbox.startW) { textbox.startW = textbox.offsetWidth; }
var style = textbox.style;
//Force complete recalculation of width
//in case characters are deleted and not added:
style.width = 0;
var desiredW = textbox.scrollWidth;
//Optional padding to reduce "jerkyness" when typing:
desiredW += textbox.offsetHeight;
style.width = Math.max(desiredW, textbox.startW) + 'px';
}
...
<input type="text" onkeyup="expand(this);" >
JSFiddle example
On the x-editable documentation you can find the option type so i guess you have to add data-editable-type="textarea"
I have this text box here...
<input name="search" type="text" maxlength="512" id="search" class="searchField" autocomplete="off" title="" />
and I also have this submit
<input type="submit" name="btnSearch" value="Search" onclick="location.href='http://www.website.com/search/';" id="btnSearch" class="buttonSearch" />
what I am trying to do is add whatever is in the text box in my
onclick="location.href='http://www.website.com/search/';"
so it would look like this..
onclick="location.href='http://www.website.com/search/what ever the user searches';"
how would I go about doing this, I have been googling my little heart out.
Please avoid mixing JavaScript and HTML. You can remove onclick attribute and replace it with this in plain JavaScript somewhere after the DOM has loaded:
document.getElementById('btnSearch').onclick = function() {
var search = document.getElementById('search').value;
var searchEncoded = encodeURIComponent(search);
window.location.url = "http://www.website.com/search/" + searchEncoded;
}
Also remember about escaping the search box, e.g. using encodeURIComponent(). Here is a working jsfiddle example.
This should work:
onclick="location.href='http://www.website.com/search/'+document.getElementById('search').value;"
But I wouldn't ever write that in one of my project as writing script directly on tags is a bad practice.
Here is a working jsfiddle
I moved the event handler out of the button as it is more maintainable. Also I encode the search query so that it gets to the server properly.
var search = document.getElementById('search');
var submit = document.getElementById('btnSearch');
submit.addEventListener('click', function(e) {
var searchValue = encodeURIComponent(search.value); // encode the search query
window.location.href = 'http://www.website.com/search/' + searchValue ;
});
You can add it to the onclick event like so
document.getEelementById("btnSearch").onclick = function(){
location.href='http://www.website.com/search/' + document.getEelementById("search").value;
}
edit: aaaaand too slow... oh well. At least this is not inline.
You would be better off using the < script> tag for this task. Example:
<input name="search" type="text" maxlength="512" id="search" class="searchField" autocomplete="off" title="" />
...
<input type="submit" name="btnSearch" value="Search" id="btnSearch" class="buttonSearch" />
<script type="text/javascript">
var button= document.getElementById('btnSearch');
button.onclick= function(){
var text= document.getElementById('search').value;
location.href='http://www.website.com/search/'+text;
}
</script>
However, you should try to 'clean' a little the text from the textbox so when you append it to the url you get a valid url. You should trim the text, then search for special characters and escape them, etc.