logo
down
shadow

input type number and search combined


input type number and search combined

By : user2952924
Date : November 19 2020, 03:59 PM
wish helps you
I am trying to get an input to be also for numbers (opening a number keyboard in mobile + up and down arrows) and making it like search type - adding "X" before the input if there is data inside it
code :
$("span.closer").on("click", function(e) {
    if (e.target.tagName == 'SPAN') {
        $(this).children("input").val('');
    }    
});
span.closer {
    display: inline-block;
    position: relative;
}
span.closer::before {
    content: '×'; font-weight: bold;
    position: absolute; cursor: pointer;
    left: 4px; top: 2px;
}
span.closer:hover::before {
    color: #00f;
}
input[type=number] {
    padding-left: 16px;
    width: 220px;
}
input[type=number]:invalid {
    border: 1px solid red;
}
input[type=search] {
    width: 240px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <label>Option 1: </label>
    <input type="search" pattern="\d*" />
    <input type="submit" value="Search" />
</form>
<br />
<form>
    <label>Option 2: </label>
    <span class="closer"><input type="number" /></span>
    <input type="submit" value="Search" />
</form>


Share : facebook icon twitter icon
Why this function for input with number only doesnt work actually with input type:number?

Why this function for input with number only doesnt work actually with input type:number?


By : stuart georskie
Date : March 29 2020, 07:55 AM
it should still fix some issue If you do a console.log(this.value); before your replace statement, you will see that for non-number inputs gets a blank value itself i.e this.value = '';
This seems to be the internal implementation of this input type.
code :
$('input').keypress(function (e) {
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
        return false;
    }
});
Can POST and GET be combined within a single input type?

Can POST and GET be combined within a single input type?


By : JulianS
Date : March 29 2020, 07:55 AM
like below fixes the issue I have a form running a shopping cart style application on my site. To add items, I POST values to a form using a submit button. To remove items, I have to use a GET command. , Technically, yes, but it's a hack:
code :
<form method="post" action="foo.php?x=y">
  <input type="text" name="a" value="b" />
</form>
 $_GET['x'] -> 'y'
 $_POST['a'] => 'b'
 $_POST['x'] => undefined index
combined max and min of two input number fields

combined max and min of two input number fields


By : White Sleep
Date : March 29 2020, 07:55 AM
around this issue You can use ng-change directive for this purpose. I have created a small JsFiddle. Please check this here.
code :
<div>
  <label>male</label>
  <input type="number" min="0" max="5" ng-model="res.male"  ng-change="update('male')">
</div>
<div>
  <label>female</label>
  <input type="number" min="0" max="5" ng-model="res.female" ng-change="update('female')">
</div>
  $scope.update = function (source){  

    var getMax = 5; //as you have said this part is done. Replace your logic here.
    //alert(source);
    if(source == "male"){
        $scope.res.female = getMax - $scope.res.male;
    }
    if(source == "female") {
        $scope.res.male = getMax - $scope.res.female;
    }
  }
Search a file using combined keywords from two input files

Search a file using combined keywords from two input files


By : King ren
Date : March 29 2020, 07:55 AM
To fix the issue you can do I have 2 input files below and need to Search a 3rd file using all possible keywords (InputFile1.txt+InputFile2.txt) from two input files. , awk to the rescue!
code :
$ awk -F, 'FILENAME==ARGV[1]{a[$0]; next} 
           FILENAME==ARGV[2]{for(k in a) b[k,$0]; next} 
           ($1,$3) in b' InputFile1.txt InputFile2.txt FileTobeSearched.txt

2.2.2.2,bla,Orange
2.2.2.2,bla,Blue
Combined <input type='text'> and <select>

Combined <input type='text'> and <select>


By : Ibrahim Aghythara
Date : September 21 2020, 01:00 PM
I wish did fix the issue. In order to achieve something similar you can use input list with datalist.
code :
<label for="url2go2">Go to:</label>
<input list="urls" id="url2go2" name="url2go2" placeholder="/" />
<datalist id="urls">
    <option value="/url1">
    <option value="/url2">
    <option value="/url3">
    <option value="/url4">
    <option value="/url5">
</datalist>
Related Posts Related Posts :
  • RouterLink is not working properly dynamically in angular 6
  • Simple HTML rendering issue
  • Best Approach to separate Form sections
  • How to Organize Phonegap HTML Files
  • Wrap a long single word using CSS
  • I am trying to implement a hover effect using CSS3 Transitions
  • How can I avoid hard coding line height while vertically centering element in a div?
  • Bootstrap3 - Removed container-fluid
  • Bootstrap framework not responsive for asp.net webform
  • How to align two inner divs inside outer absolute positioned div that has fixed width in which both divs have the same w
  • Div to ignore html tags
  • Prevent caching and stale content with a static web site
  • Is there a way to change the whole document with one selector in CSS?
  • why cant I click om my navigationbar links?
  • Is there a CSS/HTML way to cut multiple shapes out of the top/bottom of a div?
  • css border around multiple links/images
  • 'No data was received in the uploaded file', but file is not empty
  • How input boxes save previous entries
  • AMP carousel direction change
  • Bootstrap multiple carousel not working on thumbnails click
  • Is there a way to put a permanent space into an input field?
  • Html boxes not displaying properly
  • How can I change a variable in Jekyll _config.yml dynamically?
  • How can I prevent DIVs from overlapping a right floated image?
  • Eclipse and .tml files highlighting not working
  • Footer is not in the bottom of the window, (phonegap jquery mobile app for windows mobile)
  • How to put div over another
  • How to use glyphicons in bootstrap 3.0
  • Wordpress page links not working
  • How Do I Use CSS to Set the Color of An ALink?
  • Webpage doesn't scroll smoothly on screen
  • YouTube iframe, browser looks for file locally
  • html displaying inline image
  • Font acting differently on IE and Firefox
  • Encoding and decoding of the character references
  • An Image Button navigate to another site html/css
  • IE8 "Save Target as ..." won't display for block elements
  • Image hover transition for span - CSS
  • How to apply min and max on textarea?
  • How to draw multiple horizontal lines (Notebook Paper effect) using css?
  • Table Printing Issue: Gaps in top and Bottom Border of th Elements
  • grouping elements with div and applying stylesheet for that group
  • Click <div> to expand, then click again to shrink - Its expanding, just not shrinking
  • CSS - How can I center a <script>'s output?
  • Django's template variable gets interpreted as HTML
  • ngx datatable vertical scroll with rowheight set to auto
  • How to make input text border with CSS when it's OnFocus
  • Anyone know of a calendar web widget for my website I could use?
  • How does Bootstrap manage to use fixed positioning for navbar on iOS?
  • Centered text in fully clickable table cell
  • Compare HTML and HTML5
  • steps of creating webpage in bangla
  • css root element margin
  • What is the point of using absolute positioning in CSS?
  • Responsive solution for long URLs (that exceed the device width)
  • Divs don't collapse as they should - media queries
  • QTreeWidgetItem display html
  • Testing html/css image on local from jfiddle
  • long attribute value of HTML
  • Why my svg picture is truncated at the bottom when embedded in html
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org